Chart JS技术问询：如何在图表数据点间绘制加载即显的非全屏垂直线

我明白你想要的效果——不需要鼠标悬停，图表一加载就显示数据点之间的垂直线，而且不是贯穿整个页面的全屏线条，而是贴合数据点范围的线条。下面是一个基于Chart.js官方插件机制的解决方案，完全满足你的需求：

核心思路 #

我们使用Chart.js的自定义插件，在图表绘制完成后的afterDraw钩子中绘制线条。这个钩子会在图表加载、resize等所有绘制完成后触发，确保线条自动显示，无需交互。同时通过计算数据点的坐标，控制线条的高度，避免全屏效果。

完整代码示例 #

1. 定义垂直线插件 #

这个插件支持两种模式：在相邻数据点的中间位置画垂直线，或者在每个数据点的x坐标位置画垂直线（从点到x轴），你可以根据需求切换。

const verticalLinePlugin = {
  id: 'verticalLinesBetweenPoints',
  afterDraw: (chart) => {
    const ctx = chart.ctx;
    const chartArea = chart.chartArea;
    // 读取自定义配置，没有配置则用默认值
    const pluginOptions = chart.options.plugins.verticalLines || {};
    const lineColor = pluginOptions.color || '#ff4444';
    const lineWidth = pluginOptions.width || 1;
    const lineDash = pluginOptions.dash || [];
    // 可选模式：'between'（数据点中间）或 'atPoint'（数据点位置）
    const lineMode = pluginOptions.mode || 'between';

    // 取第一个数据集（如果有多个数据集，你可以循环处理）
    const dataset = chart.data.datasets[0];
    const datasetMeta = chart.getDatasetMeta(0);

    if (lineMode === 'between') {
      // 在相邻数据点的中间位置画垂直线，高度取两个点的y值范围
      for (let i = 1; i < dataset.data.length; i++) {
        const prevPoint = datasetMeta.data[i-1];
        const currPoint = datasetMeta.data[i];
        
        // 计算两个点的中间x坐标
        const midX = (prevPoint.x + currPoint.x) / 2;
        // 计算线条的上下边界（两个点的y值的最小和最大值）
        const minY = Math.min(prevPoint.y, currPoint.y);
        const maxY = Math.max(prevPoint.y, currPoint.y);

        // 绘制线条
        ctx.save();
        ctx.beginPath();
        ctx.strokeStyle = lineColor;
        ctx.lineWidth = lineWidth;
        ctx.setLineDash(lineDash);
        ctx.moveTo(midX, minY);
        ctx.lineTo(midX, maxY);
        ctx.stroke();
        ctx.restore();
      }
    } else if (lineMode === 'atPoint') {
      // 在每个数据点的x位置画垂直线，从点延伸到x轴
      for (let i = 0; i < dataset.data.length; i++) {
        const point = datasetMeta.data[i];
        
        ctx.save();
        ctx.beginPath();
        ctx.strokeStyle = lineColor;
        ctx.lineWidth = lineWidth;
        ctx.setLineDash(lineDash);
        // 从数据点画到x轴（chartArea.bottom是x轴的位置）
        ctx.moveTo(point.x, point.y);
        ctx.lineTo(point.x, chartArea.bottom);
        ctx.stroke();
        ctx.restore();
      }
    }
  }
};

2. 注册插件并创建图表 #

// 注册自定义插件
Chart.register(verticalLinePlugin);

// 获取canvas元素
const chartCtx = document.getElementById('myLineChart').getContext('2d');

// 创建图表
new Chart(chartCtx, {
  type: 'line',
  data: {
    labels: ['一月', '二月', '三月', '四月', '五月'],
    datasets: [{
      label: '月度销售额',
      data: [1200, 1900, 300, 500, 200],
      borderColor: '#2196F3',
      fill: false,
      tension: 0.1
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: '销售额'
        }
      },
      x: {
        title: {
          display: true,
          text: '月份'
        }
      }
    },
    // 配置垂直线插件
    plugins: {
      verticalLines: {
        color: '#FF9800',
        width: 2,
        dash: [4, 2], // 虚线样式
        mode: 'between' // 切换为'atPoint'可以看到另一种效果
      }
    }
  }
});

关键细节说明 #

• 自动显示：afterDraw钩子会在图表加载完成后立即执行，所以线条会自动显示，不需要任何鼠标交互。
• 非全屏线条：通过计算数据点的y值来确定线条的上下边界，避免了贯穿整个图表高度的全屏效果。如果需要线条贯穿图表绘图区域（不是页面），可以把minY改成chartArea.top，maxY改成chartArea.bottom。
• 适配性：所有坐标计算都使用Chart.js提供的chartArea和数据点的x/y属性，会自动适配图表的resize、缩放等操作，不会出现错位。
• 可定制：通过插件配置可以轻松修改线条的颜色、宽度、样式和模式，满足不同的视觉需求。

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