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

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

我目前正在尝试在react组件中为雷达图添加一个稍微透明的渐变背景。我只能通过在html文件中引用chartjs画布来找到这个问题的解决方案,但通过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;
ohfgkhjo

ohfgkhjo1#

您将需要为backgroundColor使用一个可脚本化的函数,该函数包含图表,该图表包含如下所示的上下文:

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

相关问题