您如何将 customColor 属性用作函数?我正在寻找建立一个散点图并将所有具有负值的点标记为红色,将所有具有正值的点标记为绿色。我认为 customColor 功能可以让我这样做,但我只看到 customColor 作为对象而不是函数的示例。谢谢!
问问题
4625 次
3 回答
8
HTML 模板
<ngx-charts-bar-vertical
[animations]="barAnimations"
[customColors]="barCustomColors()"
...
</ngx-charts-bar-vertical>
零件
...
barAnimations = false;
barSingle = [
{"name": "56","value": 654},
{"name": "57","value": 123},
...
]
constructor() {}
ngOnInit() {}
// your custom function
// make sure return structure is array like
// [
// {"name": "a","value": "#ff0000"},
// {"name": "b","value": "#ff0000"}
// ]
barCustomColors() {
let result: any[] = [];
for (let i = 0; i < this.barSingle.length; i++) {
if (this.barSingle[i].value < 200) {
result.push({"name": this.barSingle[i].name,"value": "#0000ff"});
}
}
return result;
}
...
然后图表将在创建图表时调用该函数。
确保自定义函数返回数组并包含颜色的名称和值。它像是:
[
{"name": "a","value": "#ff0000"},
{"name": "b","value": "#ff0000"}
]
但是如果打开动画模式,它会调用该函数的次数过多,并出现以下问题。
requestAnimationFrame 处理程序花费了 ms
它会使你的图表绘制太慢。因此,如果您想使用函数来控制和自定义图表颜色。建议关闭动画模式。
于 2018-11-21T11:52:08.940 回答
3
您需要传递准备好的颜色数组而不是函数
setCustomColors() {
let result: any[] = [];
for (let i = 0; i < this.barSingle.length; i++) {
if (this.barSingle[i].value < 200) {
result.push({"name": this.barSingle[i].name,"value": "#ff0000"});
}
else{
result.push({"name": this.barSingle[i].name,"value": "#33cc33"});
}
}
return result;
}
customColors: any;
并设置组件创建的值
constructor() {
this.customColors = this.setCustomColors();
}
于 2020-09-12T22:08:39.867 回答
0
扩展许圣泉的答案......
一种确保仅在必要时才计算颜色的方法。您可以将图表包装在一个组件中,该组件在数据更改时调用自定义颜色的生成。通过这种方式,您可以拥有动画以及自定义颜色功能,而不会影响性能。
所以在包装器组件中你会有类似的东西
...
multiVal: any = [];
@Input()
set multi(data: any) {
this.generateCustomColors();
this.multiVal = data;
}
get multi() {
return this.multiVal;
}
...
...
generateCustomColors() {
if (this.multi === undefined) {
return [];
}
// This is where you calculate your values.
// I left my conversion using a custom Color class for reference.
// Similar concept can be used for single series data
const values = {};
// for (const mult of this.multi) {
// for (const serie of mult.series) {
// if (values[serie.name] === undefined) {
// values[serie.name] = {
// name: serie.name,
// value: Color.hexFromString(serie.name),
// };
// }
// }
// }
this.customColors = Object.values(values);
}
...
于 2020-10-07T17:38:23.603 回答