使用角度图表chart.js v2的每个条具有不同的颜色答案

【问题标题】：Having different colors per bar with angular charts chart.js v2使用角度图表chart.js v2的每个条具有不同的颜色
【发布时间】：2016-06-04 20:26:15
【问题描述】：

如何在 chartjs 2.0 分支上使用 angular-chartjs 使条形图中的每个条具有不同的颜色？

我的画布如下所示：

<canvas class="chart chart-bar"
  chart-data="GBCC.setData" 
  chart-labels="GBCC.labels"
  chart-options="GBCC.options"
  chart-colors="GBCC.colors"
  height="68"
  width="300">
</canvas>

我的 GBCC 控制器如下所示：

this.labels = ['hello', 'world', 'foobar'];
this.setData = [[50, 20, 95]];
this.colors =  [ 
  '#DCDCDC', // light grey
  '#F7464A', // red
  '#46BFBD', // green
];
this.options = {
  scales: {
    yAxes: [{
      display: true,
      ticks: {
        beginAtZero: true,
        min: 0,
        max: 100,
        stepSize: 20
      }
    }]
  }
};

它将所有条形更改为数组中的第一种颜色，但不使用其他颜色。有人知道怎么做吗？

【问题讨论】：

标签： angularjs chart.js angular-chart

【解决方案1】：

如果您使用此指令https://jtblin.github.io/angular-chart.js/，请尝试以下操作：

this.color = [
  { backgroundColor: [
    '#DCDCDC', // light grey
    '#F7464A', // red
    '#46BFBD', // green
  ]};

这是对指令的 convertColor 和 get color 函数的代码审查。

第 238 行：

function convertColor (color) {
  if (typeof color === 'object' && color !== null) return color;
  if (typeof color === 'string' && color[0] === '#') return getColor(hexToRgb(color.substr(1)));
  return getRandomColor();
}

第 249 行：

function getColor (color) {
  return {
    backgroundColor: rgba(color, 0.2),
    ...
  };`
}

还有 ChartJS 的条形图示例 (http://www.chartjs.org/docs/#bar-chart-data-structure)。

var data = {
    ...
    datasets: [
        {
            ...
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            ...
        }
    ]
};

（可能是一种毫无根据的预感。）

【讨论】：