Question

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

Answer 1

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

Answer 2

我认为您需要

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);
}

ngx-charts颜色不能正确显示Angular 6？

2 个答案: