问题

你可以修改这段代码以仅将阴影效果应用于PriceGraph组件渲染的折线图，而不影响应用中的其他图表组件。请将你的代码修改如下：

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

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

  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,
        }
      }
    }
  }

  // Custom shadow for chart
  useEffect(() => {
    // Check if the chart with the id 'customShadow' already exists
    if (!Chart.controllers.customShadow) {
      Chart.controllers.customShadow = Chart.controllers.line.extend({
        draw: function() {
          const ctx = this.chart.ctx;

          // Apply shadow effect only to the PriceGraph component's chart
          ctx.save();
          ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
          ctx.shadowBlur = 10;
          ctx.shadowOffsetX = 4;
          ctx.shadowOffsetY = 4;

          Chart.controllers.line.prototype.draw.apply(this, arguments);

          ctx.restore();
        }
      });
    }
  }, []);

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

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

export default PriceGraph;

通过这种方式，你的自定义阴影效果将仅应用于PriceGraph组件的折线图，而不会影响应用中的其他图表组件。希望这对你有所帮助！

import React, { useEffect } from 'react';
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
const PriceGraph = ({ chartData, chartColour, chartFillColour }) => {
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,
}
}
}
}
// Custom shadow for chart
useEffect(() => {
Chart.register({
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 data = {
labels: chartData.labels,
datasets: [
{
data: chartData.data,
backgroundColor: chartFillColour,
borderColor: chartColour,
fill: true,
}
]
}
return chartData.labels ? <Line data={data} options={options}/> : null;
}
export default PriceGraph;

答案1

得分: 2

如果您注册了一个插件，它将用于应用程序中所有图表实例。您应该将其设置为一个“内联”插件，放在您希望使用它的图表实例中（希望 react-chartjs-2 语法是正确的）：

const myPlugin = {
  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();
    };
  }
};

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

const myPlugin = {
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();
};
}
};
return chartData.labels ? <Line data={data} options={options} plugins={[myPlugin]}/> : null;