如何在 Chart.js 折线图上完整显示日期范围？

2024-03-13 02:04:12

在 Chart.js 图表上显示从开始到结束的整个日期范围

问题概述

在使用 Chart.js 创建折线图时，我们需要展示一个销售报告。服务器返回的数据是以特定日期为键，相应销售额为值。我们的目标是在图表中显示从开始日期到结束日期的整个日期范围，即使某些日期没有数据。对于没有数据的日期，我们希望在图表上将该点置于零。

解决方案

要实现这一目标，我们需要执行以下步骤：

1. 导入 Time Scale 插件：

导入 Chart.js Time Scale 插件，该插件允许我们将时间单位用作图表中的轴。

2. 使用 time：

在图表配置中，我们将 x 轴的 type 设置为 "time"，以启用时间刻度。

3. 设置时间单位：

在 time 选项中，我们将 unit 设置为 "day"，以使用天作为时间单位。

4. 设置显示格式：

在 displayFormats 中，我们将 day 格式设置为 "yyyy-mm-dd"，以指定所需的日期显示格式。

5. 隐藏网格线：

在 grid 选项中，我们将 display 设置为 false，以隐藏网格线并创建更简洁的图表。

6. 设置边界：

在 data 选项中，我们使用 datasets 的 min 和 max 属性设置 x 轴的边界。将 min 设置为开始日期，将 max 设置为结束日期，即使没有数据也是如此。

7. 处理空值：

在 fill 选项中，我们将 mode 设置为 "step"，以确保在没有数据的情况下图表中的点连接成一条线。

示例代码：

chartData: {
    type: 'line',
    options: {
        aspectRatio: 3,
        color: '#2E436C',

        scales: {
            x: {
                type: "time",

                time: {
                    unit: 'day',
                    displayFormats: {
                        day: 'yyyy-mm-dd'
                    }
                },

                grid: {
                    display: false,
                },
            },
        },
        data: {
            datasets: [{
                data: [
                    { x: '2024-02-01', y: 2550 },
                    { x: '2024-02-05', y: 3415 },
                    { x: '2024-02-07', y: 10770 }
                ],

                min: '2024-02-01',
                max: '2024-02-29',

                fill: {
                    mode: 'step'
                }
            }]
        }
    },
},