Chart.js：用折线图比较两个时间段

问题描述

我目前正在尝试构建一个可以比较两个不同时间段数据的折线图。

我目前设法做的是在两个 X 轴上显示两个数据集，但日期不重叠，它们在时间上相互跟随。

有没有办法将两个 X 轴完全分开，从而使曲线重叠？如果是，如何？

先谢谢你！

---

我目前的结果：Current result

我想要达到的目标：Final result

我使用 chart.js v2.9.4 因为我也使用 vue-chartjs。

---

我的 chart.js 配置：

/// chartData
{
    datasets: [{
        label: 'primary',borderColor: '#016ADF',data: primary.map(result => {
            return {
                x: dayjs(Object.keys(result)[0]).utc(true).toDate(),y: Object.values(result)[0]
            };
        }),xAxisId: 'xPrimary'
    },{
        label: 'compare',data: compare.map(result => {
            return {
                x: dayjs(Object.keys(result)[0]).utc(true).toDate(),xAxisId: 'xCompare'
    }]
}

// chartOptions    
{
    responsive: true,maintainAspectRatio: false,legend: {
        display: false
    },tooltips: {
        mode: 'index',intersect: false,},scales: {
        xAxes: [{
            id: 'xPrimary',type: 'time',time: {
                unit: 'day',displayFormats: {
                    hour: 'HH:mm',day: 'DD/MM'
                },bounds: 'ticks',gridLines: {
                display: false
            }
        },{
            id: 'xCompare',gridLines: {
                display: false
            }
        }]
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）