0

How do you have each bar in a bar chart have a different color using angular-chartjs on the chartjs 2.0 branch?

My canvas looks like this:

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

My GBCC controller looks like this:

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

It will change all the bars to the first color in the array, but not use the other colors. Does any one know how to do this?

4

1 回答 1

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)'
            ],
            ...
        }
    ]
};

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

于 2016-07-29T02:48:35.240 回答