angular-chart.js - 不是默认颜色

Question

我最近想使用chart.js，angular-chart.js在我的网页上添加一个图表饼，我正在使用Webpack。

所以这是我的代码：

index.js

import 'bootstrap';
import 'angular';
import Chart from 'chart.js';
import 'angular-chart.js';
import './stylesheets/style.scss';
import 'animate.css/animate.min.css';
import './app';

app.js

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

app.config(['ChartJsProvider', function(ChartJsProvider) {
    // Configure all charts
    ChartJsProvider.setOptions({
        responsive: true,
        legend: {
            display: true,
        }
    });
}]);

app.controller('appCtrl', ['$scope', '$timeout', ($scope, $timeout) => {
    $scope.loadImage = function(image) {
        return require('./images/' + image);
    };

    $scope.colours = ['#97BBCD', '#DCDCDC', '#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'];

    $scope.list = [{
            nom: "VitaMaps",
            src: "vitamaps-thumbnails.png",
            type: "img"
        },
        {
            nom: "DiscTube",
            src: "http://dianophe.fr",
            type: "iframe"
        }
    ]

    $scope.labels = ["HTML", "CSS", "PHP", "Angular", "ASP.NET", "ASM", "C#"];

    $scope.data = [
        [90, 70, 50, 55, 10, 40, 80],
    ];
}]);

app.filter('trusted', ['$sce', function($sce) {
    return function(url) {
        return $sce.trustAsResourceUrl(url);
    };
}]);

chart-pie html：

<div class="jumbotron jumbotron-fluid no-color">
            <div class="container">
                <h1 class="display-3">Skills</h1>
                <p class="lead">Jumbo helper text</p>
                <hr class="my-2">
                <canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels" chart-options="options">
              </canvas>
            </div>

我的图表饼只有一种颜色：

Pie chart colours problem

提前感谢你的帮助，我真的被它坚持了。