条形图中的条形颜色可以根据它们的值而变化吗？

Question

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

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

Answer 1

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

修复

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

示例的要点是function AddBackgroundColors(chartConfig)

示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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