[英]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.