ng2-charts:设置颜色不起作用

时间:2017-02-07 16:57:24

标签: angular typescript ng2-charts

我的图表定义为:

  <canvas #chart baseChart
              [data]="_chartData"
              [labels]="_chartLabels"
              [chartType]="_chartType"
              [colors]="_backgroundColors">
  </canvas>

我将颜色指定为:

private _backgroundColors:string[] = ["#345657", "#112288", "#adf444"];

一切都有效,但颜色。如果我传入此数组,则所有颜色显示为相同的颜色,浅灰色。有人看到可能出错的地方吗?

3 个答案:

答案 0 :(得分:3)

可以找到解决方案here。目前没有记录。

它必须是这样的:

[{backgroundColor: ["#e84351", "#434a54", "#3ebf9b", "#4d86dc", "#f3af37"]}]

答案 1 :(得分:1)

它应该是这样的:

[
   {
      backgroundColor:"#ffa954",

   },
   {
      borderColor:"#589b00",

   }
]

每个对象代表dataSets数组

中的相应对象

答案 2 :(得分:1)

我同意以上回答,如果有人需要,我想提供详细信息。 我的示例在PIE图表中也适用于其他人。

步骤1:

在您的component.ts文件中添加以下内容

     public pieChartColors: Array < any > = [{
       backgroundColor: ['#fc5858', '#19d863', '#fdf57d'],
       borderColor: ['rgba(252, 235, 89, 0.2)', 'rgba(77, 152, 202, 0.2)', 'rgba(241, 107, 119, 0.2)']
   }];

第2步:

您的component.html应该如下所示:

   <canvas baseChart 
                [data]="pieChartData" 
                [labels]="pieChartLabels" 
                [chartType]="pieChartType"
                [options]="pieChartOptions"
                [plugins]="pieChartPlugins"
                [legend]="pieChartLegend"
                [colors]="pieChartColors"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"
                >
              </canvas>