Question

我想渲染一个带有一组（x，y）值的折线图。 x轴和y轴都需要缩放。我的意思是说，我有值（1,10），（2,20），（4,30），（8,40）1和2之间的距离应该是2到4之间的一半。这反过来应该是4和8的一半。

当我现在尝试使用折线图时，由于标签只是文字，因此它显示了1,2,4,8，它们之间有相同的差距。

var ctx = document.getElementById("chart").getContext("2d");
var data = {
    labels: [1, 2, 4, 8],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",

        data: [10,20,30,40]
    }]
};

有没有办法实现这个目标？

Answer 1

如果您愿意，可以使用'scatter'图表类型（最近推出），或者只是覆盖默认的X轴类型，使其成为'linear'而不是默认的{{1}设置（'category'和'time'是其他选项）。

但是，如果采用这种方法，则需要更改数据格式：

'logarithmic'

您还需要确保（如果继续使用var data = { // No more "labels" field! datasets: [{ label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: [{x:1,y:10},{x:2,y:20},{x:4,y:30},{x:8,y:40}] // Note the structure change here! }] }作为图表类型）覆盖选项：

'line'

可能需要执行的步骤多于此答案中显示的步骤（我没有嘲笑过这个问题，而且我不知道您现有的选项），但这些是主要步骤。

Answer 2

查看散布图表扩展程序（http://dima117.github.io/Chart.Scatter/） - 在http://www.chartjs.org/docs/#advanced-usage-community-extensions的社区扩展程序下列出。

这支持数字刻度。

线图的数字X轴

2 个答案: