如何以指定/固定间隔设置ChartJS x轴刻度？

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

关注(0)|答案(1)|浏览(248)

我有一个chart.js折线图，其中x轴标签是普通的旧数字，例如[2，4，15，45，90]，它在此图表上表示日期。我不希望x轴刻度反映数据标签，我希望刻度的间隔为20。如何实现这一点？
这在我的选项中没有任何作用：

xAxes: [ {
    display: true,
    position: 'bottom',
    ticks: {
       stepSize: 20,
       min: 0,
       max: 140
    }
],

此处示例：jsfiddle
......我发现的唯一（糟糕的）方法是将数字转换为日期，然后在tick回调中计算天数差。

chart.js

来源：https://stackoverflow.com/questions/62047402/how-can-i-set-chartjs-x-axis-ticks-at-specified-fixed-intervals

1条答案

按热度按时间

6ovsh4lw1#

您可以使用scatter图表，该图表接受数据作为单个点，即具有x和y属性的对象。若要将散点图恢复为折线图，只需在每个dataset上定义showLine: true。
要将数据作为单个点生成，可以在图表外部定义labels，并使用Array.map()转换两个值数组，如下所示。

valueArray.map((v, i) => ({ x: labels[i], y: v }))

最后要做的事情是定义xAxis.ticks，如下所示：

ticks: {
  stepSize: 1,
  autoSkip: false,
  callback: value => value % 20 == 0 ? value : null,
  min: labels[0],
  max: labels[labels.length - 1],
  maxRotation: 0
},

请查看下面修改后的代码：
第一个

赞(0）回复(0）举报 2022-11-06

我来回答

如何以指定/固定间隔设置ChartJS x轴刻度？

1条答案

相关问题

热门标签

最新问答