为timeseries数据中的不同日期添加多个vline

// 导入Chart.js库
import Chart from 'chart.js';

// 创建一个timeseries图表
const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
    type: 'line',
    data: {
        // 数据集
        datasets: [{
            // 数据集的配置
            label: '数据集1',
            data: [
                // timeseries数据点
                { x: '2022-01-01', y: 10 },
                { x: '2022-01-02', y: 20 },
                { x: '2022-01-03', y: 15 },
                // ...
            ],
        }],
    },
    options: {
        // 图表配置
        scales: {
            x: {
                type: 'timeseries',
                time: {
                    unit: 'day', // x轴时间单位为天
                    displayFormats: {
                        day: 'YYYY-MM-DD' // 日期格式
                    }
                }
            }
        }
    }
});

// 添加垂直线
chart.options.plugins = chart.options.plugins || {}; // 确保插件配置存在
chart.options.plugins.vlines = [
    { date: '2022-01-01', label: '重要日期1' },
    { date: '2022-01-03', label: '重要日期2' }
];

// 自定义插件来绘制垂直线
Chart.register({
    id: 'vlines',
    beforeDraw: (chart) => {
        const vlines = chart.options.plugins.vlines || []; // 获取所有垂直线配置

        // 遍历每个垂直线配置
        vlines.forEach((vline) => {
            const x = chart.scales.x.getPixelForValue(vline.date); // 获取日期对应的x轴位置

            // 绘制垂直线
            chart.ctx.save();
            chart.ctx.beginPath();
            chart.ctx.moveTo(x, chart.chartArea.top);
            chart.ctx.lineTo(x, chart.chartArea.bottom);
            chart.ctx.lineWidth = 2;
            chart.ctx.strokeStyle = '#FF0000';
            chart.ctx.stroke();
            chart.ctx.restore();

            // 添加标签
            chart.ctx.save();
            chart.ctx.fillStyle = '#000000';
            chart.ctx.textAlign = 'center';
            chart.ctx.fillText(vline.label, x, chart.chartArea.bottom + 20);
            chart.ctx.restore();
        });
    }
});

// 更新图表以显示垂直线
chart.update();