如何在Chart.js v4中为折线添加类似Flot.js的投影效果？

针对Chart.js 4.4.0，我们可以通过自定义插件实现仅针对折线的投影效果，避免影响图表其他元素。核心思路是在原折线绘制前，先绘制一个偏移的深色副本作为阴影，再让原折线覆盖其上。

实现步骤 #

1. 定义投影插件 #

这个插件会在折线绘制前，复制折线路径并偏移绘制阴影，仅作用于line或带连线的scatter类型数据集：

const lineShadowPlugin = {
  id: 'lineShadow',
  beforeDraw: (chart) => {
    chart.data.datasets.forEach((dataset, index) => {
      const controller = chart.getDatasetMeta(index).controller;
      // 仅处理折线或开启连线的散点图
      if (!['line', 'scatter'].includes(controller.chart.config.type) || !dataset.showLine) return;

      const ctx = chart.ctx;
      const linePoints = controller.getDataset().meta.data;
      if (linePoints.length === 0) return;

      // 保存画布上下文状态，避免污染后续绘制
      ctx.save();

      // 配置阴影样式（可自定义）
      const shadowColor = dataset.shadowColor || 'rgba(0, 0, 0, 0.2)';
      const shadowOffsetX = dataset.shadowOffsetX || 2;
      const shadowOffsetY = dataset.shadowOffsetY || 2;
      const shadowBlur = dataset.shadowBlur || 4;

      ctx.shadowColor = shadowColor;
      ctx.shadowOffsetX = shadowOffsetX;
      ctx.shadowOffsetY = shadowOffsetY;
      ctx.shadowBlur = shadowBlur;

      // 绘制阴影折线
      ctx.beginPath();
      linePoints.forEach((point, i) => {
        i === 0 ? ctx.moveTo(point.x, point.y) : ctx.lineTo(point.x, point.y);
      });
      ctx.strokeStyle = dataset.borderColor;
      ctx.lineWidth = dataset.borderWidth;
      ctx.stroke();

      // 恢复上下文状态，让原折线正常绘制
      ctx.restore();
    });
  }
};

// 全局注册插件（也可在单个图表配置中局部注册）
Chart.register(lineShadowPlugin);

2. 配置图表启用插件 #

在图表配置中，可为特定数据集自定义投影参数，或使用插件默认值：

const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'scatter', // 替换为'line'可用于折线图
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [{
      label: '数据折线',
      data: [{x: 1, y: 3}, {x: 2, y: 5}, {x: 3, y: 2}, {x: 4, y: 7}],
      borderColor: '#36A2EB',
      borderWidth: 2,
      showLine: true, // 散点图必须开启此选项才能显示连线
      // 自定义投影参数（可选）
      shadowColor: 'rgba(0, 0, 0, 0.3)',
      shadowOffsetX: 1,
      shadowOffsetY: 1,
      shadowBlur: 3
    }]
  },
  options: {
    plugins: {
      lineShadow: {} // 启用插件
    }
  }
});

关键细节说明 #

• 版本兼容性：完全适配Chart.js 4.x，使用v4官方API（chart.getDatasetMeta、controller.getDataset等），避免了旧版本废弃的Chart.types、Chart.pluginService等命名空间。
• 仅作用于折线：通过判断数据集类型和showLine属性，确保投影只作用于折线，不会影响数据点、坐标轴、图例等其他元素。
• 自定义灵活性：可通过数据集的shadowColor、shadowOffsetX/Y、shadowBlur参数，精确控制投影的颜色、偏移量和模糊程度，完美复刻Flot.js的默认效果。
• 性能友好：直接复用原折线的坐标点绘制阴影，无需复制整个画布，性能开销极低。

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