Chart.js - 向折线图背景添加渐变

Question

我希望创建一个像这样的折线图：

但我不知道如何将渐变添加到背景。此时我已经有了正确显示该行的代码。这是我的图表的代码：

     const ctx = document.getElementById("myChart");

      var speedData = {

        labels: [

          "Jan",

          "Feb",

          "Mar",

          "Apr",

          "May",

          "Jun",

          "Jul",

          "Aug",

          "Sep",

          "Oct",

          "Nov",

          "Dec"

        ],

        datasets: [

          {

            label: "Car Speed",

            data: this.car.energyConsumption,

            lineTension: 0,

            pointBackgroundColor: "#131921",

            pointBorderColor: "white",

            pointBorderWidth: 3,

            pointRadius: 6,

            borderColor: "white"

          }

        ]

      };

      var chartOptions = {

        legend: {

          display: false

        }

      };

      new Chart(ctx, {

        type: "line",

        data: speedData,

        options: chartOptions

      });

    }

Answer 1

backgroundColor使用createLinearGradient应该在这里有所帮助。backgroundColor 正确地采用不同类型的颜色。您需要创建一个渐变并指定相同的渐变。已创建一个示例片段供您重用代码。遵循第 4-7 行和第 34 行。const ctx = document.getElementById("myChart");// Create gradient hereconst ctxForGradient = document.getElementById('myChart').getContext('2d');const gradientFill = ctxForGradient.createLinearGradient(0, 500, 0, 50);gradientFill.addColorStop(0, "rgba(255, 0, 0, 0.9)");gradientFill.addColorStop(1, "rgba(0, 0, 255, 0.9)");var speedData = {  labels: [    "Jan",    "Feb",    "Mar",    "Apr",    "May",    "Jun",    "Jul",    "Aug",    "Sep",    "Oct",    "Nov",    "Dec"  ],  datasets: [{    label: "Car Speed",    data: [7, 9, 5, 8, 9, 7, 6, 10, 4, 5, 7, 8, 9],    lineTension: 0,    pointBackgroundColor: "#131921",    pointBorderColor: "white",    pointBorderWidth: 3,    pointRadius: 6,    borderColor: "white",    backgroundColor: gradientFill // Fill gradient here  }]};var chartOptions = {  legend: {    display: false  }};new Chart(ctx, {  type: "line",  data: speedData,  options: chartOptions});<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script><canvas id="myChart"></canvas>希望能帮助到你。如有任何疑问/澄清，请回复。