时间戳

首页 > 解决方案 > 如何在chart.js中将`fillColor`作为渐变？

javascript - 如何在chart.js中将`fillColor`作为渐变？

问题描述

我正在使用 chart.js 包。我只使用了一种颜色rgba()，但rgba我不想使用渐变作为fillColor.

这是我的 chart.js 代码如下：

var buyerData = {
    labels: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
    ],
    datasets: [
        {
            fillColor: "rgba(129,61,126,0.37)",
            strokeColor: "#813D7E",
            pointColor: "#813D7E",
            pointStrokeColor: "#9DB86D",
            data: [30, 40, 32, 90, 150, 20, 30, 50, 150, 100, 200, 250]
        }
    ]
};
// get line chart canvas
var buyers = document.getElementById("buyers").getContext("2d");
// draw line chart
new Chart(buyers).Line(buyerData);

标签： javascriptcsschart.js

解决方案

var ctx = document.getElementById("buyers").getContext("2d")
var gradient = ctx.createLinearGradient(0, 0, 0, 175);
gradient.addColorStop(0, "black");
gradient.addColorStop(1, "white");

 var buyerData = {

    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [{
      fillColor: gradient,
      strokeColor: "#813D7E",
      pointColor: "#813D7E",
      pointStrokeColor: "#9DB86D",
      data: [30, 40, 32, 90, 150, 20, 30, 50, 150, 100, 200, 250]
    }]
  }
  // get line chart canvas
  var buyers = document.getElementById('buyers').getContext('2d');
  // draw line chart
  new Chart(buyers).Line(buyerData);

工作小提琴

了解有关 createLinearGradient 方法的更多信息

希望这有帮助:)

推荐阅读