时间戳

首页 > 解决方案 > 如何更改图表js中列的颜色

javascript - 如何更改图表js中列的颜色

问题描述

链接codepen：https ://codepen.io/01202581905/pen/gOOYzOZ

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'bar',

  // The data for our dataset
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, -10, 35, 2, -19, 30, 15]
    }]
  },

  // Configuration options go here
  options: {}
});
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

当列的值为 0 并更改 col 的位置时，我想更改列的颜色。谢谢

我想要的结果： 在此处输入图像描述

标签： javascriptchart.js

解决方案

嗨，您必须在数据集中的 backgroundColor-Parameter 中提供一个数组：请参见此处：

var labels = ["001", "002", "003", "004", "005", "006", "007"];
var data = [20, 59, 80, 81, 56, 55, 40];
for (var i = 0, len = labels.length; i < len; i++) {
   **background_colors**.push(getRandomColor());
}

var barChartData = {
  labels: labels,
  datasets: [{
    label: "My First dataset",
    fillColor: "rgba(220,220,220,0.5)", 
    strokeColor: "rgba(220,220,220,0.8)", 
    highlightFill: "rgba(220,220,220,0.75)",
    highlightStroke: "rgba(220,220,220,1)",
    backgroundColor: **background_colors**,
    data: data
  }]
};

这应该工作！

推荐阅读