angular-chart.js如何让图例背景色与图表自动生成的颜色保持一致

解决方案 #

angular-chart.js 本身内置了动态自动配色逻辑，无需提前预设固定色值，具体实现步骤如下：

1. 移除代码中手动给$scope.colours赋值固定色值的逻辑，仅声明空数组即可，图表渲染时会根据你动态加载的数据条数自动生成对应数量的配色，并自动回填到$scope.colours数组中。
2. 若对默认配色不满意，可全局配置公共配色池，图表会按顺序从配色池中取色，数据条数超过配色池长度时会自动循环取色。
3. 图例渲染时直接遍历自动回填的$scope.colours数组，和$scope.labels按索引对应即可实现色值和图例项匹配。

修改后代码示例 #

JS 代码

var app = angular.module('App', ['chart.js']);

// 可选配置：自定义全局公共配色池，不需要可删除
app.config(function(ChartJsProvider) {
  ChartJsProvider.setOptions({
    colors: ['#bff0dd', '#ffa67b', '#b1c2ff', '#f7a7e8', '#c8f7a7']
  });
});

app.controller('Ctrl', function ($scope) { 
   // 模拟从数据库动态获取的业务数据，长度不固定
   $scope.labels = ["A","B","C","D"];
   $scope.data = ["1","2","3","4"];
   // 仅声明空数组，图表渲染完成后会自动填充生成的色值
   $scope.colours = [];
});

HTML 图例部分代码

<h3>Legends</h3>
<!-- 可加ng-if保证色值生成后再渲染图例，避免时序问题 -->
<div class="legend-item" ng-repeat="(index, color) in colours" ng-if="colours.length == labels.length">
  <span class="legend-block" style="display: inline-block; width: 14px; height: 14px; margin-right: 6px; background-color: {{color}};"></span>
  <label>{{labels[index]}}</label>
</div>

注意事项 #

你当前使用的0.10.2版本完全支持该特性，无需升级组件版本。

内容的提问来源于stack exchange，提问作者KiRa