如何仅为React中PriceGraph组件的Chart.js折线图添加阴影？

问题出在你使用Chart.register全局注册了自定义插件，这会导致所有Chart.js图表都应用该阴影效果。要实现仅作用于PriceGraph组件的效果，需要改为局部注册插件，仅在当前折线图组件中启用它。

修改步骤 #

1. 删除全局注册插件的useEffect代码，避免影响其他图表
2. 在组件内部定义自定义阴影插件对象
3. 将插件作为plugins属性传递给<Line />组件，仅当前图表加载该插件

修改后的完整代码 #

import React from 'react';
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

const PriceGraph = ({ chartData, chartColour, chartFillColour }) => {

  // 定义仅当前组件使用的自定义阴影插件
  const customShadowPlugin = {
    id: 'customShadow',
    beforeDraw: (chart) => {
      const ctx = chart.ctx;
      ctx.save();

      const originalLineDraw = ctx.stroke;
      ctx.stroke = function () {
        ctx.save();
        ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
        ctx.shadowBlur = 10;
        ctx.shadowOffsetX = 4;
        ctx.shadowOffsetY = 4;
        originalLineDraw.apply(this, arguments);
        ctx.restore();
      };
    }
  };

  const options = {
    plugins: {
      legend: {
        display: false,
      }
    },
    scales: {
      x: {
        grid: {
          display: true,
          drawBorder: true,
          drawOnChartArea: false,
        },
        ticks: {
          display: true,
        }
      },
      y: {
        grid: {
          display: false,
          drawBorder: true,
          drawOnChartArea: false,
        },
        ticks: {
          display: true,
        }
      }
    }
  };

  const data = {
    labels: chartData.labels,
    datasets: [
      {
        data: chartData.data,
        backgroundColor: chartFillColour,
        borderColor: chartColour,
        fill: true,
      }
    ]
  };

  return chartData.labels ? <Line data={data} options={options} plugins={[customShadowPlugin]} /> : null;
};

export default PriceGraph;

原理说明 #

• 自定义插件不再通过Chart.register全局注册，而是作为局部属性传递给单个<Line />组件，因此只会对当前图表生效，不会影响应用中的其他Chart.js图表。
• 保留Chart.register(...registerables)是注册Chart.js核心组件的必要步骤，不影响局部插件的使用。

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