ngx-charts - 如何使用 Ngx-Charts customColor 函数

Question

您如何将 customColor 属性用作函数？
我希望构建一个散点图，并将所有负值的点标记为红色，将所有正值的点标记为绿色。我认为 customColor 功能可以让我这样做，但我只看到 customColor 作为对象而不是函数的示例。
谢谢!

Answer 1

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 handler took ms

它会使您的图表绘制速度太慢。
因此，如果您想使用函数来控制和自定义图表颜色。
建议关闭动画模式。