Chart.js技术问题：如何在X轴上拉伸折线至全宽？

我们需要在单个Chart.js图表中展示多组数据，多数数据集包含60个数值（对应每小时的每分钟），但其中一组仅含30个数值（仅对应偶数分钟的数据）。添加该数据集后，它的折线仅显示在图表画布的一半区域，我们需要让这条折线铺满整个宽度，尝试了多种设置都没解决，请问该如何拉伸这条折线？

图片说明：红色折线对应30个数值的数据集，其余折线均对应60个数值，如何将红色折线拉伸至全宽？

最小示例代码 #

var chartData = {
    labels: [0,1,2,3,4,5,6,7,8,9],
    datasets: [
        {
            label: "Battery",
            data: [10,30,20,10,40,50,70,100,30,20],
            borderColor: "blue",
        },
        {
            label: "Speed",
            data: [30,20,10,40,50],
            borderColor: "red",
        },
    ]
};

// 定义图表配置项
var chartOptions = {
    maintainAspectRatio: false,
    responsive: true,
    legend:{
        display: true
    } 
};

// 创建图表
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
    type: "line",
    data: chartData,
    options: chartOptions,
});

解决方案 #

方法1：手动填充数据集至标签长度 #

你的30个数据对应偶数分钟（即标签数组的偶数索引位置），只需在奇数索引位置填充null，让数据集长度与标签数组一致。Chart.js会自动将有效数据点映射到正确的标签位置，折线即可铺满整个宽度。

修改后的Speed数据集：

{
    label: "Speed",
    data: [30, null, 20, null, 10, null, 40, null, 50, null],
    borderColor: "red",
    // 可选：开启spanGaps让折线跨越空白位置，保持连续
    spanGaps: true
}

若不需要连续折线，可移除spanGaps配置，此时折线会在有效数据点间断开，但仍会对应到正确位置，铺满全宽。

方法2：动态填充数据（适合批量/动态场景） #

如果数据是动态生成的，可写一个工具函数自动填充null，避免手动操作：

function fillDataToMatchLabels(originalData, labelsCount) {
    const filled = [];
    let idx = 0;
    for (let i = 0; i < labelsCount; i++) {
        // 偶数索引取原数据，奇数索引填充null
        filled.push(i % 2 === 0 ? originalData[idx++] : null);
    }
    return filled;
}

// 使用示例
const speedRawData = [30,20,10,40,50];
const filledSpeedData = fillDataToMatchLabels(speedRawData, chartData.labels.length);

// 将filledSpeedData赋值给Speed数据集的data字段

内容的提问来源于stack exchange，提问作者Døner M.