Chart.js绘制非规则时间间隔采购数据折线图示例求助

完整可运行示例代码 #

<!DOCTYPE html>
<html>
<head>
    <!-- 引入Chart.js核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- 引入moment及Chart.js时间适配器（v3+版本必需） -->
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>
</head>
<body>
    <canvas id="myChart" width="800" height="400"></canvas>

    <script>
        const purchaseData = [
            { name: 'Item A', value: 120, timestamp: '2013-03-15T09:30:00Z' },
            { name: 'Item B', value: 85, timestamp: '2014-05-20T14:45:00Z' },
            { name: 'Item C', value: 200, timestamp: '2015-08-10T11:00:00Z' },
            { name: 'Item X', value: 75, timestamp: '2016-01-05T16:20:00Z' }
        ];

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

        // 转换为Chart.js要求的数据集格式
        const chartData = {
            datasets: [{
                label: '采购金额',
                data: purchaseData.map(item => ({
                    x: new Date(item.timestamp),
                    y: item.value
                })),
                borderColor: 'rgb(75, 192, 192)',
                tension: 0.1,
                fill: false,
                pointRadius: 5,
                pointHoverRadius: 8
            }]
        };

        const chartOptions = {
            scales: {
                x: {
                    type: 'time',
                    time: {
                        unit: 'month',
                        displayFormats: {
                            month: 'YYYY-MM'
                        }
                    },
                    // 强制x轴显示指定时间范围
                    min: '2013-01-01',
                    max: '2016-12-31',
                    title: {
                        display: true,
                        text: '时间'
                    }
                },
                y: {
                    title: {
                        display: true,
                        text: '采购金额'
                    },
                    beginAtZero: true
                }
            },
            plugins: {
                tooltip: {
                    mode: 'index',
                    intersect: false,
                    // 自定义tooltip显示商品名称
                    callbacks: {
                        label: ctx => {
                            const item = purchaseData[ctx.dataIndex];
                            return `${item.name}: ${item.value} 元`;
                        }
                    }
                }
            }
        };

        new Chart(ctx, {
            type: 'line',
            data: chartData,
            options: chartOptions
        });
    </script>
</body>
</html>

关键说明 #

• 时间适配器必需：Chart.js v3及以上版本的时间轴功能依赖第三方时间库（如moment）和对应的适配器，必须引入才能正确解析和渲染时间刻度。
• 数据格式修正：原代码直接将映射后的数组传给data是错误的，Chart.js要求data是包含datasets的对象，每个数据集定义折线的样式、数据等核心信息。
• x轴范围控制：通过min和max属性强制限定x轴显示2013-01至2016-12的区间，即使你的数据没有覆盖整个时间段。
• 自定义交互效果：配置了tooltip显示商品名称，调整了折线平滑度和数据点大小，提升图表的可读性和交互体验。

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