2

我有以下选项和数据集：

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？

@银翼男孩，

我不太明白如何使用它。

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

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

4

1 回答 1

4

您可以以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} />
  )
}

在此处查找文档

在此处查看实时版本

于 2018-06-17T12:34:37.900 回答