Как использовать функцию customColor Ngx-Charts

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 занял мс

Это сделает ваш график слишком медленным.Поэтому, если вы хотите использовать функцию для управления и настройки цвета диаграммы.Предложите закрыть режим анимации.