[英]How to change chart lines color in Angular-charts.js
我在范圍內定義了顏色:
$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-colours”屬性,而不是“ chart-colors”。 有誰知道如何使它工作?
您需要使用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"
]
},
];
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.