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'
      }]
    }

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

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

这是我在非反应应用程序中使用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
      }]
    };

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

@Boy With Silver Wings ，

我不太明白我该怎么用呢。

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

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中将背景颜色更改为渐变

1 个答案: