ChartJS Charts.js -如何创建自定义X轴

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

我正在尝试创建一个混合图,一个条形图和一个折线图。下面是一个标准示例的图片。

我需要改变X轴,如下图所示,我该怎么做?

换句话说,我希望消除x轴标注对条数及其点的依赖性,并使x轴成为任意轴,从而设置最大值和最小值及其步长

pdtvr36n

pdtvr36n1#

更改标签,如下例所示:

const data = {
  // Put whatever you want
  labels: [0, 5, 10, 15, 20],
  datasets: [
    {
     /* ........ */
    },
  ]
};
kmynzznz

kmynzznz2#

我找到了一个解决方案,我们需要添加一个新的数据集,并将其绑定到一个自定义的X轴。

datasets: [{
            type: chartTypes.Line,
            xAxisID: 'custom-X-axis',
        },
/*...*/]

然后,我们需要添加此自定义轴并隐藏默认轴

scales: {
            xAxes: [
                {
                    display: false,
                }, {
                    id: 'custom-X-axis',
                    type: 'linear',
                    ticks: {
                        min: 0,
                        max: 20,
                    }
                }
            ],
}

相关问题