[英]Chart.js - Add gradient to bar chart
The gradient direction (Vertically in your case) not related directly to chart.js
, but to HTML canvas createLinearGradient() Method.渐变方向(在您的情况下为垂直方向)与
chart.js
不直接相关,而是与HTML canvas chart.js
()方法相关。
createLinearGradient
JavaScript syntax: createLinearGradient
JavaScript 语法:
context.createLinearGradient(x0,y0,x1,y1);
https://www.w3schools.com/tags/canvas_createlineargradient.asp https://www.w3schools.com/tags/canvas_createlineargradient.asp
Example of top to bottom "vertically" gradient from w3schools: w3schools 从上到下“垂直”渐变的示例:
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var my_gradient = ctx.createLinearGradient(0, 0, 0, 170); my_gradient.addColorStop(0, "black"); my_gradient.addColorStop(1, "white"); ctx.fillStyle = my_gradient; ctx.fillRect(20, 20, 150, 100);
<div>Top to bottom</div> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Docs:文档:
An alternative option is to pass a CanvasPattern or CanvasGradient object instead of a string colour.
另一种选择是传递 CanvasPattern 或 CanvasGradient 对象而不是字符串颜色。 https://www.chartjs.org/docs/latest/general/colors.html#patterns-and-gradients
https://www.chartjs.org/docs/latest/general/colors.html#patterns-and-gradients
Same as one solid color but passing CanvasGradient
object:与一种纯色相同,但传递
CanvasGradient
对象:
var bar_ctx = document.getElementById('chart').getContext('2d');
var background_1 = bar_ctx.createLinearGradient(0, 0, 0, 600);
background_1.addColorStop(0, 'red');
background_1.addColorStop(1, 'blue');
And set background_1
under data并在数据下设置
background_1
/* data */
var data = {
labels: ["Africa", "Asia", "Europe", "America"],
datasets: [{
/* data */
label: "Population (millions)",
backgroundColor: background_1,
data: [40,60,80, 100]
}]
};
Use multiple gradients objects inside backgroundColor (object1 for item-1 and so on).在 backgroundColor 中使用多个渐变对象(object1 用于 item-1 等等)。
backgroundColor: [background_1, background_2, background_3, background_4],
** My code is not DRY (The best idea her is to create gradient objects by some loop throw array of data). ** 我的代码不是 DRY(她最好的主意是通过一些循环抛出数据数组创建渐变对象)。 By purpose i keep this example "simple".
出于目的,我保持这个例子“简单”。
var bar_ctx = document.getElementById('chart').getContext('2d'); var background_1 = bar_ctx.createLinearGradient(0, 0, 0, 600); background_1.addColorStop(0, 'red'); background_1.addColorStop(1, 'blue'); var background_2 = bar_ctx.createLinearGradient(0, 0, 0, 600); background_2.addColorStop(0, 'green'); background_2.addColorStop(1, 'orange'); var background_3 = bar_ctx.createLinearGradient(0, 0, 0, 600); background_3.addColorStop(0, 'orange'); background_3.addColorStop(1, 'purple'); var background_4 = bar_ctx.createLinearGradient(0, 0, 0, 600); background_4.addColorStop(0, 'green'); background_4.addColorStop(1, 'violet'); /* data */ var data = { labels: ["Africa", "Asia", "Europe", "America"], datasets: [{ /* data */ label: "Population (millions)", backgroundColor: [background_1, background_2, background_3, background_4], data: [40,60,80, 100] }] }; var options = { responsive: true, title: { text: 'multiple colors for bars', display: true }, scales: { xAxes: [{ stacked: true, ticks: { }, }], yAxes: [{ stacked: true, }] } }; var myChart = new Chart(document.getElementById("chart"), { type: 'bar', data: data, options: options });
<canvas id="chart" width="800" height="600"></canvas> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
Try to click one of the jsfiddle there, then change the chart type to 'bar'.尝试单击那里的 jsfiddle 之一,然后将图表类型更改为“bar”。 You'll see it will work.
你会看到它会起作用。
Yes they are all the same color, because on their example they are only using one gradient.是的,它们都是相同的颜色,因为在他们的示例中,它们仅使用一种渐变。 You can create multiple gradient with different color and apply it seperately since you are using multiple rgba already, you can change it and apply specific gradient to your bar.
您可以使用不同颜色创建多个渐变并单独应用它,因为您已经在使用多个 rgba,您可以更改它并将特定渐变应用于您的条形图。 My english is not that good i hope you get my point.
我的英语不是很好,我希望你明白我的意思。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.