折线图的数字 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

如果需要，您可以使用

'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 2

查看散点图扩展 (http://dima117.github.io/Chart.Scatter/) - 在社区扩展下列出，网址为 http://www.chartjs.org/docs/#advanced-usage-community -扩展。

这支持数字刻度。

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
                }

Answer 4

Shotgun Ninja 的上述方法有效，但为了使其在 Chart.js 4.x 中工作，我必须使用如下所示的已识别比例：

    new Chart(ctx, {
      type: 'line',
      options: {
        scales: {
          myLinear: {
            type: 'linear'
          }
        }
      },
      data: {
        datasets: [
          {
            xAxisID: 'myLinear',
            data: data
          }
        ]
      }
    });