chart.js之 - 添加梯度条形图

路西法:

我希望建立一个这样的图表

在这里输入图像描述

但我不能够给在y规模渐变颜色的柱状图。这是codesandbox URL

以斯拉Siton:

梯度方向(垂直于你的情况)没有直接关系chart.js,但HTML画布 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多个梯度对象(object1对于项目-1等)。

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

**我的代码是不干燥(她是数据的一些循环抛出阵列创建渐变对象最好的办法)。按用途我保持这个例子“简单”。

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章