[英]How to make `fillColor` as gradient in chart.js?
I am using the chart.js package. 我正在使用chart.js包。 I have used only a single color
rgba()
, but instead of rgba
I want to use a gradient as the fillColor
. 我只使用了一种颜色
rgba()
,但我想使用渐变作为fillColor
而不是rgba
。
This is my chart.js code below: 这是我的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);
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);
Learn more about createLinearGradient method 了解有关createLinearGradient方法的更多信息
Hope this helped :) 希望这对您有所帮助:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.