如何在ngx图表中使用customColor根据数据值更改图表颜色

Question

我无法使用customColor属性动态更改某些数据点的颜色。我使用的是ngx图表。我遵循了医生的指示，但我的颜色没有改变。这是我的代码：

lineCustomColor() {
for (let i = 0; i < multi[0].series.length; i++) {
if (multi[0].series[i].value > 40000000) {
this.result.push({ name: multi[0].series[i].name, value: '#7aa3e0' });
}
// else {
//   this.result.push({ name: multi[0].series[i].name, value: '#33cc33' });
// }
}

在我的模板文件中：

<ngx-charts-line-chart
[view]="view"
[legend]="legend"
[showXAxisLabel]="showXAxisLabel"
[scheme]="colorScheme"
[showYAxisLabel]="showYAxisLabel"
[xAxis]="xAxis"
[yAxis]="yAxis"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[timeline]="timeline"
[results]="data"
[animations]="false"
[customColors]="lineCustomColor()"
[scheme]="colorScheme"
>
</ngx-charts-line-chart>

在取消注释我的else时，它不起作用。即使我将对象传递给[customColors]，而不是函数，那么我的颜色也不会根据数据点而改变。如有任何帮助，我们将不胜感激。

Answer 1

我希望它对你有用。

IN：(ngx图表："20.1.0"(

HTML模板

<ngx-charts-bar-horizontal
[view]="view"
[scheme]="colorScheme"
[results]="multi"
</ngx-charts-bar-horizontal>

组件.ts

import { Color, ScaleType } from '@swimlane/ngx-charts';

//Data
multi: any[] = 
[
{
"name": "Antelectasis",
"value": 10
},
{
"name": "Consolidation",
"value": 25
},
{
"name": "Infiltration",
"value": 90
}
]
backgroundColor:any[] = [];
//Custom Color
myColors(){ 
const rojo = "rgb(255, 0, 0)";
const verde = "rgb(0, 255, 14)";
const amarillo = "rgb(255, 242, 0)";
this.multi.forEach( disease =>{
if( disease.value >= 51 ){
this.backgroundColor.push(rojo);
}else if(disease.value >= 21 && disease.value <= 50){
this.backgroundColor.push(amarillo);
}else{
this.backgroundColor.push(verde);
}
});
}
// Apply Color
colorScheme: Color = {
name: 'Variation',
selectable: true,
group: ScaleType.Ordinal,
domain: this.backgroundColor
};
ngOnInit(): void {
this.myColors();
}