Chart.js - 向条形图添加渐变

Question

我正在寻找这样的图表

但是我无法在条形图的 y 尺度中给出渐变颜色。这是代码和框URL。

Answer 1

渐变方向chart.js（在您的情况下为垂直）与HTML canvas createLinearGradient()方法没有直接关系。

createLinearGradientJavaScript 语法：

context.createLinearGradient(x0,y0,x1,y1);

https://www.w3schools.com/tags/canvas_createlineargradient.asp

w3schools 的从上到下“垂直”渐变示例：

context.createLinearGradient(x0,y0,x1,y1);

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);

“一个渐变”

文件：

另一种选择是传递 CanvasPattern 或 CanvasGradient 对象而不是字符串颜色。https://www.chartjs.org/docs/latest/general/colors.html#patterns-and-gradients

与一种纯色相同但传递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');

并background_1在数据下设置

/* data */
var data = {
  labels: ["Africa", "Asia", "Europe", "America"],
  datasets: [{
    /* data */
    label: "Population (millions)",
    backgroundColor: background_1,
    data: [40,60,80, 100]
  }]
};

“酒吧的多种颜色”

在backgroundColor 中使用多个渐变对象（object1 代表item-1 等等）。

<div>Top to bottom</div>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

** 我的代码不是 DRY （她最好的想法是通过一些循环抛出数据数组来创建渐变对象）。我故意让这个例子保持“简单”。

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');

/* data */
var data = {
  labels: ["Africa", "Asia", "Europe", "America"],
  datasets: [{
    /* data */
    label: "Population (millions)",
    backgroundColor: background_1,
    data: [40,60,80, 100]
  }]
};