如何使用Chart.js创建含多X轴的时序混合图表

数据预处理 #

先把给定的原始数据拆分并汇总：

• 每日折线数据：直接提取原始的日期与对应数值，按日期排序保证时序正确
• 月度柱状数据：计算每月数值总和，2023年2月总和为25，3月总和为5

Chart.js 实现方案 #

通过配置双X轴实现需求：底部轴绑定每日日期（对应折线图），顶部轴绑定月份（对应柱状图），再将不同数据集关联到对应轴即可。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <title>混合日期月份图表</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="mixedChart" width="800" height="400"></canvas>
    <script>
        // 原始数据集
        const rawData = [
            { date: '2023-02-25', value: 9 },
            { date: '2023-02-27', value: 12 },
            { date: '2023-02-28', value: 4 },
            { date: '2023-03-02', value: 1 },
            { date: '2023-03-10', value: 4 }
        ];

        // 处理每日折线数据（按日期排序）
        const sortedDailyData = rawData.sort((a, b) => new Date(a.date) - new Date(b.date));
        const dailyLabels = sortedDailyData.map(item => item.date);
        const dailyValues = sortedDailyData.map(item => item.value);

        // 处理月度汇总数据
        const monthlySummary = {
            '2023-02': 25,
            '2023-03': 5
        };
        const monthlyLabels = Object.keys(monthlySummary);
        const monthlyValues = Object.values(monthlySummary);

        // 初始化图表
        const ctx = document.getElementById('mixedChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                datasets: [
                    // 每日折线图数据集
                    {
                        label: '每日数值',
                        type: 'line',
                        data: dailyValues,
                        xAxisID: 'x-daily',
                        borderColor: '#2196F3',
                        backgroundColor: 'rgba(33, 150, 243, 0.1)',
                        tension: 0.3,
                        fill: true
                    },
                    // 月度柱状图数据集
                    {
                        label: '月度总和',
                        data: monthlyValues,
                        xAxisID: 'x-monthly',
                        backgroundColor: '#FF9800',
                        barPercentage: 0.6
                    }
                ]
            },
            options: {
                scales: {
                    // 底部日期X轴
                    'x-daily': {
                        type: 'category',
                        labels: dailyLabels,
                        position: 'bottom',
                        grid: { display: false },
                        ticks: { rotation: 45 }
                    },
                    // 顶部月份X轴
                    'x-monthly': {
                        type: 'category',
                        labels: monthlyLabels,
                        position: 'top',
                        grid: { display: false },
                        offset: true
                    },
                    y: {
                        beginAtZero: true,
                        title: { display: true, text: '数值' }
                    }
                },
                plugins: {
                    legend: { position: 'top' }
                }
            }
        });
    </script>
</body>
</html>

关键配置说明 #

• 双X轴绑定：通过xAxisID属性将折线图绑定到x-daily轴、柱状图绑定到x-monthly轴
• 混合图表类型：在折线图数据集中指定type: 'line'，覆盖全局的bar类型
• 样式优化：关闭X轴网格线、旋转日期标签避免重叠，调整柱状图宽度提升视觉效果

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