Chart.js实现X轴为time类型的双Y轴时间序列图表开发方案

实现说明 #

对原有单轴配置做两处核心调整即可支持多Y轴时间序列展示，X轴的time类型配置完全保留，兼容unixTime格式的输入数据：

• 在scales配置块中新增第二个Y轴，设置独立的显示位置、标题、样式，关闭冗余网格线避免视觉干扰
• 为每个数据集新增yAxisID属性，和对应Y轴的ID绑定

完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<!-- 若使用代码中的jQuery选择器，请确保已引入jQuery依赖，也可替换为原生DOM操作 -->

<canvas id="myChart"></canvas>
<script type="text/javascript">
    // 预置两个符合要求的时间序列数据集，格式均为[{x: unix时间戳, y: 数值}, ...]
    // const carSpeedData = [...];
    // const carRemainingFuelData = [...];

    $("#myChart").width($(window).width() * 0.97);
    $("#myChart").height($(window).height() * 0.8);

    const ctx = document.getElementById('myChart').getContext('2d');

    const chartConfig = {
        type: 'line',
        data: {
            datasets: [
                {
                    label: '车速',
                    data: carSpeedData,
                    borderColor: 'pink',
                    yAxisID: 'y' // 绑定到左侧Y轴
                },
                {
                    label: '剩余油量',
                    data: carRemainingFuelData,
                    borderColor: 'lightblue',
                    yAxisID: 'y1' // 绑定到右侧Y轴
                }
            ]
        },
        options: {
            parsing: false,
            normalized: true,
            animation: false,
            responsive: false,
            scales: {
                x: {
                    type: 'time',
                    title: {
                        display: true,
                        text: '时间（客户端时区）',
                        font: {
                            size: 24
                        }
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: '车速（英里/小时）',
                        font: {
                            size: 24
                        }
                    }
                },
                // 新增第二个Y轴配置
                y1: {
                    position: 'right',
                    title: {
                        display: true,
                        text: '剩余油量（%）',
                        font: {
                            size: 24
                        }
                    },
                    grid: {
                        drawOnChartArea: false // 不重复绘制网格线，避免界面混乱
                    }
                }
            }
        }
    }

    new Chart(ctx, chartConfig);
</script>

内容的提问来源于stack exchange，提问作者user7429643