【问题标题】：Can the colors of bars in a bar chart be varied based on their value?条形图中条形的颜色可以根据它们的值而变化吗？
【发布时间】：2016-05-10 17:09:11
【问题描述】：

使用chart.js 2，条形车中条形的颜色可以根据它们的值变化吗？

例如，如果比例为 0 - 100，则 50% 及以上的列可能为绿色，而 0-49% 的列可能为红色。

【问题讨论】：

标签： chart.js

【解决方案1】：

据我所知，每个被绘制的点都没有配置或回调。我能想到的最好方法是创建一个可以修改图表配置/数据对象的函数。这不是解决问题的最优雅的方法，但它会起作用。

修复

将您的图表配置/数据对象传递给将添加背景颜色的函数。

例子的重点是function AddBackgroundColors(chartConfig)

例子：

function AddBackgroundColors(chartConfig) {
  var min = 1; // Min value
  var max = 100; // Max value
  var datasets;
  var dataset;
  var value;
  var range = (max - min);
  var percentage;
  var backgroundColor;

  // Make sure the data exists
  if (chartConfig &&
    chartConfig.data &&
    chartConfig.data.datasets) {
    // Loop through all the datasets
    datasets = chartConfig.data.datasets;
    for (var i = 0; i < datasets.length; i++) {
      // Get the values percentage for the value range
      dataset = datasets[i];
      value = dataset.data[0];
      percentage = value / range * 100;

      // Change the background color for this dataset based on its percentage
      if (percentage > 100) {
        // > 100%
        backgroundColor = '#0000ff';
      } else if (percentage >= 50) {
        // 50% - 100%
        backgroundColor = '#00ff00';
      } else {
        // < 50%
        backgroundColor = '#ff0000';
      }
      dataset.backgroundColor = backgroundColor;
    }
  }

  // Return the chart config object with the new background colors
  return chartConfig;
}

var chartConfig = {
  type: 'bar',
  data: {
    labels: ["percentage"],
    datasets: [{
      label: '100%',
      data: [100]
    }, {
      label: '50%',
      data: [50]
    }, {
      label: '49%',
      data: [49]
    }, {
      label: '5%',
      data: [5]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
};

window.onload = function() {
  var ctx = document.getElementById("canvas").getContext("2d");
  chartConfig = AddBackgroundColors(chartConfig);
  var myChart = new Chart(ctx, chartConfig);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.bundle.min.js"></script>
<canvas id="canvas" width="400" height="200"></canvas>

【讨论】：

感谢您快速而彻底的回答。正是我的想法。很高兴在 ChartJS 文档中看到类似的内容。

【解决方案2】：

在 Chart.js 2 中，可以使用数组设置多种颜色。

因此您可以将backgroundColor 定义为一个颜色字符串数组，与数据集数据匹配。

var myChart = new Chart(ctx, {
  datasets: [{
    label: 'Votes',
    data: [1, 2, 3],
    // Make the first bar red, the second one green and the last one blue
    backgroundColor: ['#f00', '#0f0', '#00f']
  }]
});

您可以根据数据中的值轻松生成数组：

function getColorArray(data, threshold, colorLow, colorHigh) {
  var colors = [];
  for(var i = 0; i < data.length; i++) {
    if(data[i] > threshold) {
      colors.push(colorHigh);
    } else {
      colors.push(colorLow);
    }
  }
  return colors;
}

查看此fiddle 以获得工作演示

【讨论】：