可以通过图表数据设置图表颜色。有助于将特定颜色与特定系列相匹配。
例如删除或忽略 [colors] 属性和数据规范
<canvas style="height: 600px" baseChart
chartType="bar"
[datasets]="chartData"
设置图表数据
[
{
"data": [
{
"y": 18353021615,
"t": 2014
},
],
"label": "Energy",
"backgroundColor": "rgb(229,229,229)",
"pointBackgroundColor": "rgba(229, 229, 229, 1)",
"pointHoverBackgroundColor": "rgba(151,187,205,1)",
"borderColor": "rgba(0,0,0,0)",
"pointBorderColor": "#fff",
"pointHoverBorderColor": "rgba(151,187,205,1)"
},
或者所以下面的测试会通过
expect(component.chartData[0].backgroundColor).toBe('rgba(242,200,124,1)');
我有一组默认颜色的模板
public readonly localChartColours: Color[] = [
{
backgroundColor: 'rgb(78,180,189)',
pointBackgroundColor: 'rgba(78, 180, 189, 1)',
pointHoverBackgroundColor: 'rgba(151,187,205,1)',
borderColor: 'rgba(0,0,0,0)',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(151,187,205,1)'
}, {
设置数据时设置颜色
const chartDataPrototype = {data: points, label: seriesLabel};
const coloursForItem = this.findColours(this.chartData.length);
Object.keys(coloursForItem).forEach(colourProperty => {
chartDataPrototype[colourProperty] = coloursForItem[colourProperty];
});
this.chartData.push(chartDataPrototype);
并根据需要在特定的基础上覆盖它们
this.chartData.forEach(item => {
if (uopColours[item.label]) {
item.backgroundColor = uopColours[item.label];
}