chart.js中多条x轴,相同y轴在一个图像上

使用场景（例子）：多个x轴（不同的时间段：相同的天数，x轴的对比数据总个数一样），使用相同的y轴：通过xAxisID 生成多个x轴，primary来定义主轴，通过设置多个x轴的对应关系，生成与主轴一样的数据，从而使起始值一样，对比不同时间段的数据。

const data = {
    datasets: [
        {
            label: 'Dataset 1',
            xAxisID: 'x-axis-1', // 对应第一个X轴
            // ... 其他数据集属性, 如data, backgroundColor等
        },
        {
            label: 'Dataset 2',
            xAxisID: 'x-axis-2', // 对应第二个X轴
            // ... 其他数据集属性, 如data, backgroundColor等
        }
    ]
};

const config = {
    type: 'line',
    data: data,
    options: {
        scales: {
            'y': { // 可以使用'y'作为Y轴的ID
               // Y轴的配置
            },
            'x-axis-1': {
                type: 'linear',
                position: 'bottom',
                // X轴的其他配置...
            },
            'x-axis-2': {
                type: 'linear',
                position: 'top', // 第二个X轴显示在顶部
                // X轴的其他配置...
            }
        }
    }
};

const myChart = new Chart(document.getElementById('myChart'),config);

这段代码展示了如何在图表中设置两个X轴（x-axis-1 和 x-axis-2），其中一个位于底部，另一个位于顶部。datasets数组中的每个数据集都通过xAxisID属性分别关联到它们的X轴。这样，你就可以控制每个数据集沿哪个X轴进行对齐。

例子(仅供参考):

import Chart from 'chart.js/auto'
const option:any = {
   type: 'line',
   options: {
     tension: 0.3,
     scales: {}
   },
 }
chartOptions = new Chart('chart', option)
chartOptions.options = {
   plugins:{
     legend:{
       labels:{
         boxWidth:20,
         boxHeight:6
       }
     },
   },
   interaction: {
     intersect: false,
     mode: 'index',
   },
   scales: {
     y: {
       grid: {
         drawBorder: false, // 不画 Y 轴边界线以避免双重边界线
       },
       title: {
         display: true,
         text: fieldItem?.label
       },
       ticks: {
           maxTicksLimit: 10
       }
     },
     'now-cycle':{
       position:'bottom',
       primary: true,
       title: {
         display: true,
         text:'日期'
       },
       grid:{
         color:['rgba(256,256,256,.01)'],
         tickColor: '#e5e5e5' 
       },
     },
     'last-cycle':{
       position:'bottom',
       display:false,
       ticks:{
         display:false,
       },
     },
     'before-last-cycle':{
       position:'bottom',
       display:false,
       ticks:{
         display:false,
       }
     },
   },
 }
 chartOptions.data.datasets = [{
   label: '前周期',
   data: chartData.value.before_last,
   xAxisID:'before-last-cycle',
 }, {
   label: '上周期',
   data: chartData.value.last,
   xAxisID:'last-cycle',
 },{
   label: '本周期',
   data: chartData.value.now,
   xAxisID:'now-cycle',
 }]
 chartOptions.update()