如何在 Angular-charts.js 中更改图表线条颜色
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)'
}];
和canvas在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"
]
},
];
我在我的范围内定义了颜色:
$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)'
}];
和canvas在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"
]
},
];