ChartJS 背景图像未显示在React图表js-2中

bmp9r5qi  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(237)

我想在React图表-2使用图像背景,但它不工作。我尝试在平面图表页面和它的工作没有任何问题。

const image = new Image();
image.src = 'https://www.chartjs.org/img/chartjs-logo.svg';

const plugin = {
  id: 'custom_canvas_background_image',
  beforeDraw: (chart) => {
    if (image.complete) {
      const ctx = chart.ctx;
      const {top, left, width, height} = chart.chartArea;
      const x = left + width / 2 - image.width / 2;
      const y = top + height / 2 - image.height / 2;
      ctx.drawImage(image, x, y);
    } else {
      image.onload = () => chart.draw();
    }
  }
};
export default function Chart() {
   return <Line options = {
      options
   }
   data = {
      data
   }
   plugins = {
    plugin
   }
   />;
}
5gfr0r5j

5gfr0r5j1#

plugins必须定义为array,如下所示:

plugins = {[
  plugin
]}

我无法直接在react-chartjs-2页面上找到这些信息,但在GitHub上查看types.ts时,我发现了这个...

/**
 * The plugins array that is passed into the Chart.js chart
 * @see https://www.chartjs.org/docs/latest/developers/plugins.html
 * @default []
 */
plugins?: Plugin<TType>[];

相关问题