角度 4 chartjs 颜色答案

【问题标题】：angular 4 charjs colors角度 4 chartjs 颜色
【发布时间】：2018-02-17 10:42:10
【问题描述】：

无法在 Angular 4 图表 js 中使用颜色。使用“ng2-charts”模块。

标记

<div style="display: block">
      <canvas baseChart
              [data]="pieChartData"
              [labels]="pieChartLabels"
              [colors]="chartColors"
              [chartType]="pieChartType"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)"></canvas>
    </div>

打字稿

  public pieChartLabels:string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
  public pieChartData:number[] = [300, 500, 100];
  public pieChartType:string = 'pie';
  //  public chartColors:Array<any> = ["#ef9ab2","#7bc6f2","#fce196","#4caf50","#ff5722","#795548","#607d8b","#673ab7","#86d8d8","#9e9e9e",
  //                                      "#e94351","#00bcd4","#fef982","#8e5ea2","#66c855","#fffbdd","#e5e5e5","#f5fdf8","#e8c3b9","#c4574f" 
  //                                     ];
  // public chartColors:Array<any> = [{backgroundColor:"#ef9ab2"},{backgroundColor:"#7bc6f2"},{backgroundColor:"#fce196"}];

// this color range, sets all the pies to same color
public chartColors:Array<any> = [{ 
    backgroundColor: 'rgba(150,12,12,1)',
    borderColor: '#fff',
    pointBackgroundColor: 'rgba(150,1,1,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(110,12,12,0.8)'
  },
  { 
    backgroundColor: 'rgba(12,127,152,1)',
    borderColor: '#fff',
    pointBackgroundColor: 'rgba(12,17,12,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(77,83,96,1)'
  },
  { 
    backgroundColor: 'rgba(12,12,15,1)',
    borderColor: '#fff',
    pointBackgroundColor: 'rgba(148,159,177,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
}];

图表生成工作正常。图表不拾取指定的颜色。所有 3 个饼图都显示为灰色。

谢谢

【问题讨论】：

标签： angular charts

【解决方案1】：

基于文档here。看起来你需要对你的颜色更具体一点。 color 对象似乎有许多属性，可以让您控制颜色。根据您希望颜色的显示方式，您需要将颜色更改为类似于以下内容：

public chartColors:Array<any> =
[
    {
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },
    {
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    }
];

【讨论】：

谢谢。我之前也试过。它确实为所有馅饼选择了第一个背景颜色。抱歉，我不知道如何在此处传递代码（结果不好），因此将其删除
如果您要添加更多代码，请更新您的问题并将其包含在其中。