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

Question

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

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

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

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

Answer 1

对于 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 2

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

所以步骤如下：

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

祝你好运！