Question

我对角度很新，我使用ChartJS在我的Angular 4应用程序中绘制条形图。我希望每个酒吧都有不同的颜色。我确实喜欢他们在这里所说的http://www.chartjs.org/docs/latest/，但它并没有w <

这是我的html文件：

<div>
  <div style="display: block">
    <canvas class="dashboard-tile-chart" baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
</div>

component.ts文件

export class BarGraphComponent implements OnInit {

  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true,
    scales: {
      xAxes: [{
        stacked: false,
        gridLines: {
          display: false
        }
      }],
      yAxes: [{
        stacked: false
      }]
    }
  };
  public barChartLabels: string[] = ['', '', '', '', '', '', ''];
  public barChartType = 'bar';
  public barChartLegend = false;

  public barChartData: any[] = [
      {
        data: [100, 150, 150, 100, 200, 150, 100],
        label: '',
        backgroundColor: [
          '#5cb85c',
          '#65C6BB',
          '#1BBC9B',
          '#f0ad4e',
          '#5cb85c',
          '#5cb85c',
          '#f0ad4e'
        ]
      }];
}

显示数据，但不为每个条形设置不同的颜色。

stackoverflow上的其他类似主题说这样做：

myObjBar.datasets[0].bars[0].fillColor = "green"; //bar 1
myObjBar.datasets[0].bars[1].fillColor = "orange"; //bar 2

但我没有条形图的对象。

修改

如何动态设置条形颜色？我试过了：

const colors = [];
this.vitalValues.forEach(value => {
  colors.push(value.color);
});

const barColors: Array<any> = [{
  backgroundColor: colors
}];

this.barChartColors = barColors;

但没有效果..

Answer 1

使用以下内容尝试...

在您的HTML中，添加 [colors] 指令...

<div>
  <div style="display: block">
    <canvas class="dashboard-tile-chart" baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [colors]="barChartColors"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
</div>

然后，在 component.ts 中添加...

public barChartColors:Array<any> = [{
   backgroundColor: ['red', 'yellow', 'green', 'orange']
}];

_{不是'Angular 4'pro，而是AFAIK这应该有用}

使用Angular 4中的ChartJS为每个条设置不同的颜色

1 个答案: