在 react-chartjs-2 中将背景颜色更改为渐变

Question

我有以下选项和数据集：

const chartData = {
      labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
      datasets: [{
        label: 'Chart',
        data: this.transformIntoArray(data),
        backgroundColor: 'linear-gradient(to right, #20f08b, #07dfb1)',
        borderColor: '#05deb3'
      }]
    }

但它什么也没做。我将它用作反应组件，并且不知道在这种情况下如何才能到达 canvas 的上下文。而且我还渲染了许多这些图表。

        <Line
          data={chartData}
          options={options}
          height={50}
          width={300}
        />

这是我在 not-react 应用程序中使用 chart.js 时将渐变添加到图表的方式：

var gradient = this.ctx.createLinearGradient(0, 0, document.getElementById(this.id).width, document.getElementById(this.id).height);
    gradient.addColorStop(0, '#20f08b');
    gradient.addColorStop(0.5, '#20f08b');
    gradient.addColorStop(1, '#07dfb1');
    document.getElementById(this.id).style.backgroundColor = 'transparent';

    this.updatedData = {
      labels: labels,
      datasets: [{
        label: 'gradient chart',
        data: this.data,
        backgroundColor: gradient,
        borderColor: gradient
      }]
    };

如何知道如何将渐变添加到 react-chartjs-2 中的 Line？

@银翼少年,

我不太明白我该如何使用它。

这是我现在使用此方法所做的：

render() {

const getData = (canvas) => {
      const ctx = canvas.getContext("2d");
      const gradient = this.ctx.createLinearGradient(0, 0, 300, 0);
      gradient.addColorStop(0, '#20f08b');
      gradient.addColorStop(0.5, '#20f08b');
      gradient.addColorStop(1, '#07dfb1');

      return {
        labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
        datasets: [{
          label: 'Chart',
          data: this.transformIntoArray(data),
          backgroundColor: gradient,
          borderColor: '#05deb3'
        }]
      }
    }

    const canvas = document.createElement('canvas');
    const chartData = getData(canvas);

    return (
     <Line
      data={chartData}
      options={options}
      height={50}
      width={300}
    />
   )

但它说我 TypeError: Cannot read property 'createLinearGradient' of undefined at getData

Answer 1

您可以用同样的方法将渐变添加到 react-chartjs。

render() {
  const data = (canvas) => {
  const ctx = canvas.getContext("2d")
  const gradient = ctx.createLinearGradient(0,0,100,0);
  ...
    return {
        ...
        backgroundColor: gradient
        ...
    }
  }

  return (
    <Line data={data} />
  )
}

查找文档here

观看现场版here

在 react-chartjs-2 中将背景颜色更改为渐变

Change background color to gradient in react-chartjs-2

reactjs

charts

gradient

react-chartjs