更新

Question

我正在angular2 web应用程序中构建chart.js函数。我希望条形图中的条形图为红色或绿色，具体取决于它们的值是高于还是低于某个阈值。目前，我有一个静态解决方案，如下所示：

  public barChartLabels: string[] = ['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00', '05:00'];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = false;

  public barChartData: any[] = [
    {
      data: [85, 81, 80, 81, 56, 73, 70, 5, 0, 0, 65, 70, 83, 90, 85, 86, 84, 80, 87, 88, 82, 74, 71, 80],
      label: 'Values'
    }
  ];
private colors = [
    {
      backgroundColor: [
        'rgba(45, 227, 81, 0.2)',
        'rgba(45, 227, 81, 0.2)',
        'rgba(45, 227, 81, 0.2)',
        'rgba(45, 227, 81, 0.2)',
        'rgba(45, 227, 81, 0.2)',
        'rgba(45, 227, 81, 0.2)'
        // Potentially loads more colors
      ]
    }
  ];

然而，这很乱，感觉有点矫枉过正。我需要一个支持动态更新数据的解决方案，只需将值与阈值进行比较并返回一种或另一种颜色即可。这必须以我可以在Angular2模板中绑定的方式完成。我该怎么做？

更新

这是html：

<canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [colors]="colors" [options]="barChartOptions" [legend]="barChartLegend"
    [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
</canvas>

Answer 1

在你的HTML中：

...[colors]="getColors()"

在您的.ts文件中：

getColors() {
  return [{
     backgroundColor: this.barChartData.map(d => d > threshold ? red : green)
   }];
}

在Angular2中创建动态数组

更新

1 个答案: