0

我正在尝试使用角度 6 中的 ngx-charts 为堆积条形图添加颜色。我使用数组添加颜色，但每次颜色都会自动更改。每当我请求数据颜色自动更改时。是否有任何功能或技术可以在角度 6 中手动将颜色分配给 ngx-charts 到每个数据？这是我的 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']  };
4

2 回答 2

3

我也遇到了同样的问题，然后我使用了 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 Demo

于 2018-07-14T10:05:30.157 回答
0

我想你需要这个

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);
}
于 2018-08-15T12:33:29.040 回答