如何让chart.js根据x，y数据集自动构建x轴标签？

gt0wga4j 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(162)

有没有办法让chart.js自动显示最适合X，Y数据集的标签范围？
我有一个简单的数据集，它是以零为基础的，但数据间隔不均匀，例如：

0.0, 7.0
 0.5, 8.0
 1.2, 9.0
 ...
 49.9 213.0

有没有办法把这个数据集传递到chart.js中，让它做正确的事情，比如说，计算从0 -〉50.0的10个标签，并显示用一条线连接的所有数据点？

2条答案

编辑：低于接受的版本在高于版本^2.7时不再有效。

第一个

这在chart.js 2.x中是可以实现的，它可以通过数据传递x和y属性。
下面是一个取自chart.js示例的示例
第一个

对于3.8，上述答案再次过时：/
对于具有线性X轴的折线图，您需要此选项：

options: {
    scales: {
      x: {
        type: 'linear'
      }
    }
  }

如果您将其添加到https://www.chartjs.org/docs/3.8.0/charts/line.html（data: data,的下方），那么它将构建一个线性X轴。因为默认图表使用月份名称，为了使其正常工作，您应该打开“设置”标签，并将标签更改为如下所示：

const labels = [1, 2, 3, 14, 15, 16, 17];

X轴现在应该在3和14之间插值，在数据点之间留下一个大的间隙：