javascript - 为react-chartjs-2添加渐变背景

Question

我目前正在尝试向 react 组件内的雷达图添加具有轻微透明度的渐变背景。我只能通过在 html 文件中引用 Chartjs Canvas 来找到此问题的解决方案，但无法通过 tsx/jsx 文件中的 React 组件找到解决方案。

Desired Result我正在寻找，并且 Current Result

下面的代码用于实现当前结果。

import { Chart } from 'react-chartjs-2';
import { Chart as ChartJS, LineController, LineElement, PointElement, LinearScale, Title, Filler, RadialLinearScale } from 'chart.js';

ChartJS.register(LineController, RadialLinearScale, LineElement, PointElement, LinearScale, Filler, Title);

const labels = ['Thing 1', 'Thing 2', 'Thing 3', 'Thing 4', 'Thing 5', 'Thing 6'];
const chartData = [5, 3, 4, 5, 2, 4];

const data = {
  labels: labels,
  datasets: [
    {
      data: chartData, 
      fill: true,
      backgroundColor: 'pink',
      borderColor: 'transparent',
      pointBorderColor: 'transparent',
      pointBackgroundColor: 'transparent',
    },
  ],
};

const options = {
  scales: {
    r: {
      grid: {
        lineWidth: 2,
      },
      angleLines: {
        lineWidth: 2,
      },
      gridLines: {
        display: false
      },
      ticks: {
        display: false,
        maxTicksLimit: 1
      },
    }
  }
}

const RadarGraph = () => {
    
  return (
      <Chart type="radar" data={data} options={options}/>
  )
}

export default RadarGraph;

Answer 1

您将需要对背景颜色使用可编写脚本的函数，其中包含包含上下文的图表，如下所示:

const data = {
  labels: labels,
  datasets: [
    {
      data: chartData, 
      fill: true,
      backgroundColor: ({chart: {ctx}}) => {
        const bg = ctx.createLinearGradient(paramters);
        // More config for your gradient
        return bg;
      }
    },
  ],
};