Chart.js-添加渐变而不是纯色-实现解决方案

您提供的链接非常清晰，您必须在数据集中的字段fillColor中放入linearGradient对象，而不是纯颜色。你可以做复杂的渐变，但这里有一个简单的代码（改变相同橙色的不透明度）：

var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(250,174,50,1)');   
gradient.addColorStop(1, 'rgba(250,174,50,0)');

以及您的完整数据集：

datasets: [
            {
                fillColor : gradient, // Put the gradient here as a fill color
                strokeColor : "#ff6c23",
                pointColor : "#fff",
                pointStrokeColor : "#ff6c23",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "#ff6c23",
                data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
            }
        ]

在这个JSFiddle 中看到它的作用

注意：对于那些使用较新版本（v2.7.0）Chart.js的人，请在将@bviale的答案复制粘贴回代码库时发现它不起作用；一些属性名称已更改：

fillColor -> backgroundColor
strokeColor -> borderColor
pointColor -> pointBackgroundColor
pointStrokeColor -> pointBorderColor

您需要更新这些属性名称才能使其工作。

参考：https://github.com/chartjs/Chart.js/blob/master/docs/charts/line.md#dataset-属性

对于在react中使用，我采用了以下方式您需要向组件传递一个id，然后使用该id 获取元素

import React, { Component } from 'react'
import { Line } from 'react-chartjs-2'
export default class GraphComponent extends Component{
  constructor(props){
    super(props)
    this.state = {
      chartData: {}
    }
  }
  componentDidMount(){
    //your code
    var ctx = document.getElementById('canvas').getContext("2d")
    var gradient = ctx.createLinearGradient(0, 0, 0, 400)
    gradient.addColorStop(0, 'rgba(229, 239, 255, 1)')
    gradient.addColorStop(1, '#FFFFFF')
    const newData = {
      labels: [1, 1],
      datasets: [
        {
          label: 'usd',
          data: [1,1],
          backgroundColor: gradient,
          borderColor: this.props.border_color,
          pointRadius: 0
        }
      ]
    }
    this.setState({chartData: newData})
  }
  //more of your code
  render(){
    return(
          <Line
            id='canvas'//you need to give any id you want
            data={this.state.chartData}
            width={100}
            height={30}
            options={{
              legend: {
                display: false
              }
            }}
          />
    )
  }
}

这只是我的第二个答案，所以如果我在写

更新版本2022

var ctx = document.getElementById("temp-chart").getContext("2d");

在获取上下文元素后声明梯度，即ctx

var gradient = ctx.createLinearGradient(0, 0, 0, 400);
            gradient.addColorStop(0.2, 'rgb(255, 10, 86,0.5)');
            gradient.addColorStop(1, 'rgb(255, 10, 86,0.1)');

您的数据集将是

datasets: [{
                 label: 'Transactions',
                 data: [1,3,4,5]
                 backgroundColor: gradient,
                 borderColor: 'rgb(255, 10, 86,1)',
                 borderWidth: 2,
           }],

此处发布的React解决方案可能会付出一些努力，但很可能会产生其他错误，如"createLinearGradient不是一个函数"或"；document.getElementById（）返回null"，因为它正在加载DOM之前查找图表id。缺乏React的ChartJS文档也于事无补。

我发现一个更干净的解决方案是将图表创建为一个功能组件，并确保所有需要的ChartJS资产都已正确初始化。

1.确保ChartJS正确初始化和注册

import { Line } from 'react-chartjs-2' import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler, ScriptableContext } from "chart.js";
ChartJS.register(CategoryScale,LinearScale,PointElement,LineElement,Title,Tooltip,Legend,Filler);

2.使用ScriptableContext添加渐变

backgroundColor: (context: ScriptableContext<"line">) => { const ctx = context.chart.ctx; const gradient = ctx.createLinearGradient(0, 0, 0, 200); gradient.addColorStop(0, "rgba(238,174,202,1)"); gradient.addColorStop(1, "rgba(238,174,202,0)"); return gradient; },

带折线图渐变的Live Codepen在此处输入链接描述

对于最新版本，请不要忘记设置fill: true

  function getGradient(ctx, chartArea) {
    let gradient = ctx.createLinearGradient(
      0,
      chartArea.bottom,
      0,
      chartArea.top
    );
    gradient.addColorStop(0.9, "rgba(102, 235, 169, .4)");
    gradient.addColorStop(0, "transparent");
    return gradient;
  }

将数据集选项设置为以下

fill: true,
backgroundColor: function (context) {
    const chart = context.chart;
    const { ctx, chartArea } = chart;
   // This case happens on initial chart load
   if (!chartArea) return;
   return getGradient(ctx, chartArea);
},

对于任何使用Angular和ng2图表的人来说，这里是我的解决方案。为简洁起见，省略了图表设置。

import { Component, OnInit, ViewChild, ChangeDetectorRef, AfterViewInit } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';
import { GenericLineChart } from './generic-line-chart';

@Component({
    selector: 'app-stats-chart',
    templateUrl: './stats-chart.component.html',
    styleUrls: ['./stats-chart.component.scss']
})
export class StatsChartComponent implements OnInit, AfterViewInit {
    @ViewChild(BaseChartDirective, { static: true }) chartDirective: BaseChartDirective;
    constructor(private changeDetectorRef: ChangeDetectorRef) { }
    ngOnInit() {
        // ...setup chart
    }
    ngAfterViewInit() {
        // set gradient
        const gradient = this.chartDirective.chart.ctx.createLinearGradient(0, 0, 0, 400);
        gradient.addColorStop(0, 'rgba(30, 214, 254, .3)');
        gradient.addColorStop(1, 'rgba(0,0,0,0)');
        this.chart.lineChartData[0].backgroundColor = gradient;
        this.changeDetectorRef.detectChanges();
    }
}

您可以使用这个npm包。

https://www.npmjs.com/package/chartjs-plugin-gradient

这使得创建渐变backgroundColor或borderColor变得非常容易。

示例：

const chart = new Chart(ctx, {
  data: {
    datasets: [{
      // data
      gradient: {
        backgroundColor: {
          axis: 'y',
          colors: {
            0: 'red',
            50: 'yellow',
            100: 'green'
          }
        },
        borderColor: {
          axis: 'x',
          colors: {
            0: 'black',
            1: 'white',
            2: 'black',
            3: 'white'
          }
        }
      }
    }]
  }
});