如何使用ChartJS创建含不同标签双数据系列的折线图？

算力阿峰

2026-7-23

在ChartJS中创建带两个数据系列的折线图

要实现你需要的折线图，核心是把两个数据集的数值按X轴标签的顺序对齐，缺失年份的数值填null（ChartJS会自动跳过这些点，折线不会连到0）。下面是具体实现：

步骤1：预处理数据集

先把你的两个数据集转换成和X轴标签顺序对应的数组：

const xLabels = ['2017', '2019', '2020', '2021', '2022'];
const dataSet1 = {'2020': 6, '2021': 8, '2022': 10};
const dataSet2 = {'2017': 5, '2019': 4, '2020': 9, '2022': 11};

// 转换为对齐X轴的数组
const processedData1 = xLabels.map(year => dataSet1[year] ?? null);
const processedData2 = xLabels.map(year => dataSet2[year] ?? null);

步骤2：编写ChartJS配置

在HTML中创建canvas容器，然后初始化Chart实例：

<!-- HTML部分 -->
<canvas id="myLineChart" width="400" height="200"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// JS部分
const ctx = document.getElementById('myLineChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: xLabels, // 直接传入你的X轴标签列表
        datasets: [
            {
                label: '数据集1',
                data: processedData1,
                borderColor: 'rgb(255, 99, 132)',
                tension: 0.1,
                fill: false
            },
            {
                label: '数据集2',
                data: processedData2,
                borderColor: 'rgb(54, 162, 235)',
                tension: 0.1,
                fill: false
            }
        ]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>