Цвета ngx-charts отображаются неправильно Angular 6?

Я пытаюсь добавить цвет к гистограмме с накоплением, используя ngx-диаграммы в angular 6. Я использую массив для добавления цветов, но каждый раз цвет меняется автоматически. Всякий раз, когда я запрашиваю данные, цвет меняется автоматически. Есть ли какая-либо функция или метод для назначения цветов ngx-диаграммам для всех данных вручную в angular 6? Вот мой HTML-код

<ngx-charts-bar-vertical-stacked [scheme]="colorScheme"
                        [results]="multi" [gradient]="gradient" [xAxis]="showXAxis"
                        [yAxis]="showYAxis" [legend]="showLegend"
                        [showXAxisLabel]="showXAxisLabel"
                        [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel"
                        [yAxisLabel]="yAxisLabel" [view]="  " (select)="onSelect($event)">

Вот массив цветов, который я использовал в своем машинописном файле.

colorScheme = { 
domain: ['red', 'green','blue','pink','black']  };

angular angular6 ngx-charts
person M.T.S    schedule 12.07.2018    source источник
comment
Можете сделать stackblitz для этого чучела?????   -  person Sanoj_V    schedule 12.07.2018

Ответы (2)


arrow_upward
3
arrow_downward

У меня тоже была такая же проблема, тогда я использовал это свойство ngx-charts:

В HTML:

<ngx-charts-bar-vertical-stacked
  [customColors]="ageGroupColors"
  .....
</ngx-charts-bar-vertical-stacked>

В файле Ts:

ageGroupColors: [
  {name: 'Below 20 yrs', value: '#55C22D'},
  {name: 'Between 20 and 25 yrs', value: '#C1F33D'},
  {name: 'Between 25 and 30 yrs', value: '#3CC099'},
  {name: 'Between 30 and 35 yrs', value: '#AFFFFF'},
  {name: 'Between 35 and 40 yrs', value: '#8CFC9D'},
  {name: 'More than 40 yrs', value: '#26c6da'}
];

Надеюсь, поможет

Ссылка: демонстрация Github ngx-charts

person Anshul Gupta    schedule 14.07.2018

arrow_upward
0
arrow_downward

Я думаю, тебе это нужно

import { ColorHelper } from '@swimlane/ngx-charts';


colors: ColorHelper
colorScheme = { 
  domain: ['red', 'green','blue','pink','black']  
};
schemeType: any;
yDomain = [0, 150]

getColors() {
  this.colors = new ColorHelper(this.colorScheme, this.schemeType, this.yDomain);
}
person jayjay    schedule 15.08.2018