相关疑难解决方法(0)

我使用Angular-Chart.js(AngularJS Chart.js版本)来创建条形图.图表正在使用除颜色之外的选项.

即使我设置它们,它在文档中指出,它们仍然是灰色的.

<div class="graph-display" ng-controller="chartController">
    <canvas class="chart chart-bar"
    data="bilans.data"
    labels="bilans.labels"
    series="bilans.series"
    options="{
        scaleShowHorizontalLines: true,
        scaleShowVerticalLines: false,
        tooltipTemplate: '<%= value %> $',
        responsive: true
    }"
    colours="{
    fillColor: 'rgba(47, 132, 71, 0.8)',
    strokeColor: 'rgba(47, 132, 71, 0.8)',
    highlightFill: 'rgba(47, 132, 71, 0.8)',
    highlightStroke: 'rgba(47, 132, 71, 0.8)'
    }"
    ></canvas>
</div>

实际上,选项是有效的,但颜色不是.难道我做错了什么？

我看过如何更改Angular-Chart.js的颜色,但它与整个(数据集)的颜色有关,而不是特定的栏.

我正在寻找的是一种在条形图中为每个条形应用不同颜色的方法; ChartJS到Angular.

所以,我有一个条形图:

<canvas id="locationBar" class="chart chart-bar" data="chartParams.votes" labels="chartParams.listOfLocations" series="chartParams.series" colours="chartParams.colours" options="chartParams.options"></canvas> 

使用以下角度代码(当然在控制器中)

$scope.chartParams = {
    listOfLocations: ['Trenzalore','Earth','Caprica','Sol','Tau Ceti'],
    votes: [[5,10,6,7,2]],
    series: ["Nice Places"],
    colours: [{fillColor:getRandomColour()}],
    options: {barShowStroke : false}
};

哪里getRandomColour()会返回一个随机颜色.

现在,该colours字段将此颜色应用于所有条形:

当我真的想要每个酒吧有不同的颜色时:

Plunker