使用场景(例子):多个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()