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

Question

Как у вас есть каждый бар на гистограмме другого цвета с использованием угловых диаграмм на ветке 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 
     } 
    }] 
    } 
}; 

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

Answer 1

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

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

---

Это с кодом обзора convertColor в директивы и получить цветовые функции.

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

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