如何在Chart.js图表中添加始终指向当日的垂直虚线

你可以通过 Chart.js 官方注解插件实现需求，该方案支持多参考线共存，且当日标识线可自动定位到最新日期，无需手动更新坐标。

操作步骤 #

• 安装并注册注解插件
  如果使用npm管理依赖，先执行安装命令：
  npm install chartjs-plugin-annotation

在现有代码顶部引入插件并完成注册：

import Chart from 'chart.js/auto';
import 'chartjs-adapter-moment';
// 新增引入注解插件
import annotationPlugin from 'chartjs-plugin-annotation';
// 注册插件
Chart.register(annotationPlugin);

$(document).ready(function () {
    fetchChartData();
});
// 后续原有fetchChartData、createChart逻辑保持不变

• 修改图表配置添加垂直线规则
  在原有图表配置的options节点下添加plugins.annotation配置，垂直线直接绑定当前日期对象，会自动适配你已有的时间类型x轴完成定位，不需要手动计算像素位置。
  虚线样式、标签文字都可以通过配置项自定义，后续新增其他参考线时，只要在annotations对象下新增对应配置项即可。

修改后完整的config配置参考：

const config = {
    type: 'line',
    data: data,
    options: {
        elements: {
            point:{
                radius: 0
            }
        },
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'month'
                },
                ticks: {
                    source: 'data'
                }
            }
        },
        // 新增注解配置
        plugins: {
            annotation: {
                annotations: {
                    todayMarker: {
                        type: 'line',
                        xScaleID: 'x',
                        yScaleID: 'y',
                        // 绑定当前日期，每次渲染自动定位到当日位置
                        x: new Date(),
                        borderColor: '#ff4d4f',
                        borderWidth: 2,
                        borderDash: [5, 5], // 虚线格式：[实线长度, 间隙长度]
                        label: {
                            display: true,
                            content: '当前日期',
                            position: 'top',
                            backgroundColor: 'rgba(255,77,79,0.8)'
                        }
                    }
                    // 其他参考线可在此处继续新增
                }
            }
        }
    }
};

注意事项 #

• 因为你已经引入了chartjs-adapter-moment时间适配器，new Date()生成的日期对象可以直接被x轴识别，不需要额外做格式转换
• 如果需要调整虚线的疏密，修改borderDash的两个数值即可
• 如果需要让线在图表数据更新时始终保持在最新当日位置，只要在图表更新逻辑里把todayMarker.x的值重新赋值为new Date()再调用myChart.update()即可

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