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 here

const 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>

希望能帮助到你。如有任何疑问/澄清，请回复。