[英]Change default colors set on Angular ngx-charts
经过一段时间的调试,我找到了解决方案:
所以这是步骤:
步骤1:在我的.ts文件中,添加了一个带有所需颜色的变量
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};
步骤2:在.html文件中,我在[scheme] =“ colorScheme”属性内调用了该变量
<ngx-charts-pie-chart
[results]="chartData.pieChartData.chartPoints"
[legend]="chartData.chartOptions.showLegend"
[explodeSlices]="chartData.chartOptions.explodeSlices"
[labels]="true"
**[scheme]="colorScheme"**
[tooltipDisabled]="!chartData.chartOptions.showToolTip"
[doughnut]="chartData.chartOptions.donut"
aria-hidden="true">
</ngx-charts-pie-chart>
祝好运!
使用colorScheme变量可以自定义您的图表颜色。 您可以在文档中找到说明。
https://swimlane.gitbook.io/ngx-charts/examples/pie-charts/pie-chart
图表的自定义颜色。 用于覆盖特定值的颜色
SRC / app.ts
//our root app component
import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser-animations';
import {NgxChartsModule} from '@swimlane/ngx-charts';
import {single, multi} from '../data.ts';
@Component({
selector: 'my-app',
template: `
<ngx-charts-pie-chart
[view]="view"
[scheme]="colorScheme"
[results]="single"
[legend]="showLegend"
[explodeSlices]="explodeSlices"
[labels]="showLabels"
[doughnut]="doughnut"
[gradient]="gradient"
(select)="onSelect($event)">
</ngx-charts-pie-chart>
`
})
export class App {
single: any[];
// chart area size
view: any[] = [700, 400];
// options
showLegend = false;
showLabels = true;
explodeSlices = false;
doughnut = false;
// your color scheme
colorScheme = {
domain: [
'#FF8A80',
'#EA80FC',
'#8C9EFF',
'#80D8FF',
'#A7FFEB',
'#CCFF90',
'#FFFF8D',
'#FF9E80'
]
};
constructor() {
Object.assign(this, {single})
}
// select event
onSelect(event) {
console.log(event);
}
}
@NgModule({
imports: [ BrowserModule, BrowserAnimationsModule, NgxChartsModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
data.ts
export var single = [
{
"name": "Apple",
"value": 8940000
},
{
"name": "Banana",
"value": 5000000
},
{
"name": "Ornage",
"value": 7200000
},
{
"name": "Avocado",
"value": 4830200
},
{
"name": "Cherry",
"value": 5520000
},
{
"name": "Coconut",
"value": 1200000
},
{
"name": "Guava",
"value": 2230000
},
{
"name": "Lemon",
"value": 4323000
}
];
对于 19 以上的较新版本。 他们改变了他们的结构。 您可以从这里给出配色方案的名称,示例用法将是
<ngx-charts-pie-chart
[view]="view"
[scheme]="'forest'"
[results]="single"
[legend]="showLegend"
[explodeSlices]="explodeSlices"
[labels]="showLabels"
[doughnut]="doughnut"
[gradient]="gradient"
(select)="onSelect($event)">
</ngx-charts-pie-chart>
但是如果你想使用自定义颜色,那么你需要使用[customColors]
属性,它的格式就像
{ name: "", value: '#33cc33' }
在这里,您需要确保颜色名称和数据对象名称必须相同。 例如你的数据就像[{name="Turkey",value:100}]
那么你的颜色对象需要是[{name="Turkey",value: '#33cc33'}]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.