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

Question

我正在寻找建立这样的图表

但是我无法为条形图提供y比例的渐变颜色。这是代码框URL。

Answer 1

渐变方向（实际上是您的情况）与chart.js不直接相关，但与HTML canvas createLinearGradient()方法直接相关。

[createLinearGradient JavaScript语法：

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

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

来自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;">

“一个渐变”

文档：

另一种选择是传递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内部使用多个渐变对象（对于item-1，使用object1，依此类推）。

backgroundColor: [background_1, background_2, background_3, background_4],

**我的代码不是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');

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/[email protected]"></script>

Answer 2

[尝试单击那里的jsfiddle之一，然后将图表类型更改为'bar'。您会看到它会工作。

是的，它们都是相同的颜色，因为在他们的示例中，它们仅使用一种渐变。您可以创建多个具有不同颜色的渐变并将其分别应用，因为您已经在使用多个rgba，因此可以对其进行更改并将特定的渐变应用于您的条形。我的英语不好，我希望你能明白我的意思。