折线图的数字 X 轴

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

检查散点图扩展（http://dima117.github.io/Chart.Scatter/) - listed under Community Extensions at http://www.chartjs.org/docs/#advanced-usage-community-extensions。

这支持数字尺度。

Answer 2

如果需要，您可以使用 'scatter' 图表类型（这是最近才引入的），或者只是覆盖默认的 X 轴类型以使其成为 'linear' 而不是默认的 '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' 作为图表类型）覆盖选项：

var options = {
    scales: {
        xAxes: [{
            type: 'linear',
            // ...
        }]
    }
}

可能需要的步骤比此答案中显示的更多（我没有对此进行模拟，我不知道您现有的选项），但这些是主要步骤。

Answer 3

如果你想在 js 中更新数组使用：

var aChartDataMoy       = [];
for (i = 0; i < nbTamis; i++) {
            aChartDataMoy.push({
                'x': parseFloat(aTamis[i]),
                'y': parseFloat(aMoyenne[i])
            });   
}

和

datasets: [{
                    label: "Moyenne",
                    borderColor: 'rgb(229, 57, 53)',
                    borderWidth: 1,
                    fill: false,
                    data: aChartDataMoy
                }

折线图的数字 X 轴

Numeric X axis for linechart

linechart

chart.js