Chartjs 3.x -如何在只有1个数据集的水平条形图两侧复制X轴?

7tofc5zh  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(140)

我尝试在图表的两侧(底部和顶部)复制X轴刻度。
我见过类似的问题,但这是在chartjs 2.x中--从那时起,他们更改了选项的比例部分。您以前可以执行类似的操作:

xAxes: [
      {
        position: 'top',
      },
      {
        position: 'bottom',
      }
    ]

但是在Chartjs 3.x中,你不能为xAxes提供一个数组。你现在需要给你的数据集添加一个ID,然后在刻度选项中引用这个ID。但是当一个刻度对象表示位置时,我不能在2个刻度对象中引用1个数据集:顶部和另一个位置:它将只使用最后一个缩放对象。
所以我的问题是,对于一个数据集,我如何才能让它的X轴在图表的底部和水平条形图的顶部?这样,如果图表很大,我就不必总是向下滚动来查看值是什么。
编辑:根据反馈,我现在得到了下面的结果,它更接近我所寻找的,但顶部的刻度是怎么回事?为什么它们与底部的数字不匹配?
第一个

tktrz96b

tktrz96b1#

如果您希望在图表顶部看到相同的ticks,只需定义第二个x轴,如下所示:

x1: {
  position: 'top'
}

请看下面的可运行代码,看看它是如何工作的:
第一个

相关问题