如何使用Chart.js复现原Highcharts/Highstock中的指定图表？

要实现目标中同一时间刻度下并列显示多组柱状图的效果，无需设置X轴堆叠或多X轴，正确实现方式如下：

核心错误纠正 #

你之前设置x.stacked: true会触发Chart.js的堆叠柱状图模式，这就是柱子重叠堆叠的原因，需要关闭该配置（默认值为false，也可显式声明）。

正确实现步骤 #

1. 统一时间轴数据：确保所有数据集的X轴数据对应相同的时间点，Chart.js会自动将同一时间点的柱子并列排列。
2. 关闭X轴堆叠：移除x.stacked: true配置，保持默认的非堆叠模式。
3. 调整柱子间距（可选）：通过barPercentage和categoryPercentage优化分组柱子的宽度与间距。

完整代码示例 #

const ctx = document.getElementById('targetChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        // 时间刻度数组，支持ISO字符串、时间戳等合法时间格式
        labels: ['2024-05-01', '2024-05-02', '2024-05-03', '2024-05-04'],
        datasets: [
            {
                label: '数据集A',
                data: [12, 19, 3, 5],
                backgroundColor: 'rgba(255, 99, 132, 0.6)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            },
            {
                label: '数据集B',
                data: [8, 15, 7, 10],
                backgroundColor: 'rgba(54, 162, 235, 0.6)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            },
            {
                label: '数据集C',
                data: [5, 12, 9, 14],
                backgroundColor: 'rgba(255, 206, 86, 0.6)',
                borderColor: 'rgba(255, 206, 86, 1)',
                borderWidth: 1
            }
        ]
    },
    options: {
        scales: {
            x: {
                type: 'time',
                position: 'top',
                ticks: {
                    major: { enabled: true },
                    minRotation: 0,
                    maxRotation: 0,
                    source: 'data'
                },
                time: {
                    unit: 'day'
                },
                // 显式关闭堆叠，确保分组显示
                stacked: false
            },
            y: {
                beginAtZero: true
            }
        },
        // 调整柱子宽度和分组间距，数值范围0-1
        barPercentage: 0.7,
        categoryPercentage: 0.8
    }
});

关键说明 #

• 所有数据集共享同一个X轴，无需创建多X轴；只要时间点匹配，Chart.js会自动完成分组排列。
• 若使用数据集独立的x字段（而非共用labels），需确保每个数据点的x值严格对应（例如：data: [{x: '2024-05-01', y: 12}, ...]）。
• 时间轴的解析依赖Chart.js的时间适配器，确保已引入对应的适配器（如chartjs-adapter-date-fns）。

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