Question

我的范围内定义了颜色：

 $scope.colours = [{ // grey
        backgroundColor: 'rgba(148,159,177,0.2)',
        pointBackgroundColor: 'rgba(148,159,177,1)',
        pointHoverBackgroundColor: 'rgba(148,159,177,1)',
        borderColor: 'rgba(148,159,177,1)',
        pointBorderColor: '#70ff06',
        pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
        { // dark grey
            backgroundColor: 'rgba(77,83,96,0.2)',
            pointBackgroundColor: 'rgba(77,83,96,1)',
            pointHoverBackgroundColor: 'rgba(77,83,96,1)',
            borderColor: 'rgba(77,83,96,1)',
            pointBorderColor: '#2129ff',
            pointHoverBorderColor: 'rgba(77,83,96,0.8)'
        },
        { // dark grey
            backgroundColor: 'rgba(77,83,96,0.2)',
            pointBackgroundColor: 'rgba(77,83,96,1)',
            pointHoverBackgroundColor: 'rgba(77,83,96,1)',
            borderColor: 'rgba(77,83,96,1)',
            pointBorderColor: '#2129ff',
            pointHoverBorderColor: 'rgba(77,83,96,0.8)'
        }];

在html中定义画布：

<canvas id="line" class="chart chart-line" chart-data="data"
                    chart-labels="labels" chart-series="series" chart-options="options" chart-colors="colors"
                    chart-dataset-override="datasetOverride" chart-click="onClick">
            </canvas>

但它没有对页面进行任何更改。我还尝试了“$ scope.colours”而不是“$ scope.colors”和“chart-colors”属性而不是“chart-colors”。有没有人知道如何让它发挥作用？

Answer 1

您需要使用 datasetOverride

 <canvas id="outreach" class="chart chart-bar" 
        chart-labels="ctrl.socialChart.labels" 
        chart-data="ctrl.socialChart.data" 
        chart-series="ctrl.socialChart.series"
        chart-colors="ctrl.socialChart.colors"
        chart-options="ctrl.socialChart.options"
          chart-dataset-override="ctrl.datasetOverride"
 ></canvas>

在控制器中，

 ctrl.datasetOverride = [
            {
                fill: true,
                backgroundColor: [
               "#ED402A",
               "#36A2EB",
               "#FFCE56"
                ]
            },
            {
                fill: true,
                backgroundColor: [
               "#F0AB05",
               "#36A2EB",
               "#FFCE56"
                ]
            },
            {
                fill: true,
                backgroundColor: [
               "#A0B421",
               "#36A2EB",
               "#FFCE56"
                ]
            },
            {
                fill: true,
                backgroundColor: [
               "#00A39F",
               "#36A2EB",
               "#FFCE56"
                ]
            },

            ];

DEMO

如何在Angular-charts.js中更改图表线条颜色

1 个答案: