Наличие разных цветов на столбцах с угловыми диаграммами chart.js v2

Как сделать так, чтобы каждая полоса на гистограмме имела другой цвет, используя angular-chartjs в ветви chartjs 2.0?

Мой холст выглядит так:

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

Он изменит все полосы на первый цвет в массиве, но не будет использовать другие цвета. Кто-нибудь знает как это сделать?


chart.js angularjs angular-chart
person user133688    schedule 04.06.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если вы используете эту директиву, https://jtblin.github.io/angular-chart.js/ попробуйте следующее:

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

Это из обзора кода директивы convertColor and get color functions.

Строка 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)'
            ],
            ...
        }
    ]
};

(И, возможно, необоснованная догадка.)

person user6652337    schedule 29.07.2016