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

Question

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

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

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

我知道这可以通过自定义和修改来实现，但是chartjs对此行为有实际的适当支持。

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

Answer 1

我看到以下两个选项：

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