Question

无法在角度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个馅饼都呈灰色。

感谢

Answer 1

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

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)'
    }
];

角4 charjs颜色

1 个答案: