css - 更改在 Angular ngx-charts 上设置的默认颜色

Question

我正在开发一个角度应用程序并使用 ngx-charts，在调试和在线搜索了片刻之后，我找不到如何更改图表上的调色板。

默认的角度调色板如下所示：

你们知道如何更改 ngx-charts 上的调色板吗？

非常感谢任何帮助，谢谢！

Answer 1

经过一段时间的调试，我找到了解决方案：

所以这里是步骤：

第 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>

祝你好运！

Answer 2

对于 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'}]

Answer 3

使用 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 {}

数据.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
  }
];

Answer 4

除了 pc coder 先生的回答。

澄清一下，在您的模板中确保使用customColors如下：

 <ngx-charts-bar-vertical 
  [customColors]="barChartcustomColors"
  [view]="view"
  [results]="barChartData"
  [legend]="true"
  [legendPosition]="below"
  [showGridLines]="showGridLines"
  [showXAxisLabel]="true"
  [showYAxisLabel]="true"
  [xAxis]="true"
  [yAxis]="true">
</ngx-charts-bar-vertical>

在您的组件中，确保像这样声明自定义颜色：

  barChartcustomColors = 
  [
    { name: "2019", value: '#febb00' },
    { name: "2020", value: '#1dd068' },
    { name: "2021", value: '#1dd068' },
    { name: "2022", value: '#febb00' },
  ]

  barChartData = [
    { name: "2019", value: 30 },
    { name: "2020", value: 60 },
    { name: "2021", value: 96 },
    { name: "2022", value: 151 },
  ];

请注意，我使用了barChartcustomColors已在 HTML 模板和 TS 组件中使用的变量。

因此，只需确保您的数据名称键逐字匹配颜色名称键，因为任何拼写错误都不会使其呈现。