代码之家 › 专栏 › 技术社区 › Oleg_Hudyma

如何更改角度图表中的图表线条颜色。js公司

angular-chart charts angularjs javascript

Oleg_Hudyma · 技术社区 · 7 年前

我在我的范围内定义了颜色:

 $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.colors”而不是“$scope.colors”和“chart colors”属性而不是“chart colors”。有人知道如何让它工作吗?

1 回复 | 直到 7 年前

Sajeetharan 7 年前

您需要使用 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