angular-chart.js 基于图表标签值的自定义颜色答案

【问题标题】：angular-chart.js custom color based on chart label valuesangular-chart.js 基于图表标签值的自定义颜色
【发布时间】：2016-10-21 00:41:10
【问题描述】：

我正在使用 angular-chart.js 集成圆环图，我想使用基于图表标签值的自定义颜色。

//Controller
    vm.labels = ["A", "B", "C"];
    vm.data = [1, 2, 3];

//HTML
    <canvas id="doughnut" class="chart chart-doughnut"
                        chart-data="vm.data" 
                        chart-labels="vm.labels"                    
                        chart-options="options"
                        chart-colors = "colours"
                        chart-legend = "true" >
    </canvas>

我正在设置如下颜色

ChartJsProvider.setOptions({
       colours: ['#DD1C2C', '#E03E2D','#E35B2B'],
       responsive: true
});

只有当所有 A、B 和 C 都存在时它才能完美运行（A => #DD1C2C B=> #E03E2D 和 C=>#E35B2B）

但是对于以下情况

$scope.labels = ["A", "C"];
$scope.data = [1, 3];

A => #DD1C2C 和 C=>#E03E2D

预期：A => #DD1C2C 和 C=>#E35B2B

【问题讨论】：

标签： chart.js angular-chart donut-chart

【解决方案1】：

你有没有尝试用空字符串和0来填充缺失的部分

$scope.labels = ["A", "", "C"];
$scope.data = [1, 0, 3];

【讨论】：