如何在单个图表中使用多个Chartjs X轴？

2024-05-19 • 问答

我知道Chartjs允许您添加多个x轴，但是我无法实现全部功能。

如您所见，第二个x轴显示为category类型，并且步骤没有像第一个那样正确地呈现。有没有办法让第二个X轴像第一个X轴一样？

此外，工具提示是否可以实际对应2个不同的x轴？现在，它仅基于第一个x轴显示。

我了解这可以通过自定义和黑客入侵来实现，但是chartjs对此行为确实有适当的支持。

到目前为止，根据我的研究，似乎第二个x轴更多地用于标记而不是多余的轴。

我看到以下两个选项：

1。）
通过为图表对象分配不同的ID来创建多个x轴。然后根据需要使用这些ID映射数据集。然后，您可以在options对象中，将轴类型更改为例如linear。此外，工具提示将对应于您要查找的每个数据点。

2。）
通过设置新的比例尺类来创建自定义轴，如“开发人员/新轴”中所述：https://www.chartjs.org/docs/latest/developers/axes.html

var myChart = new Chart(ctx,{
    type: 'line',data: {
        datasets: [{
            data: [10,20,30,60],label: 'datasetOne',// This binds the dataset to the first x axis
            xAxisID: 'x-axis-One'
        },{
            data: [25,15,9,18],label: 'datasetTwo',// This binds the dataset to the second x axis
            xAxisID: 'x-axis-Two'
        }],labels: ['Jan','Feb','Mar','Apr']
    },options: {
        scales: {
            xAxes: [{
                id: 'x-axis-One',type: 'linear',},{
                id: 'right-y-axis',type: 'x-axis-Two',}]
        }
    }
});

3。）
根据估计的结果/项目的数据结构，您可以考虑切换到默认使用linear x-axis的散点图。 https://www.chartjs.org/docs/latest/charts/scatter.html

如何在单个图表中使用多个Chartjs X轴？

adsddn 回答：如何在单个图表中使用多个Chartjs X轴？

大家都在问