在 ng2-chart 中设置条形图的颜色

Question

我正在尝试根据值的范围为条形图中的条形设置颜色。

TS

  public barChartData: any[];
  public chartColors: any[];
    value = [] // This array have my values from DB like  [3.5, 2.5, 1.5, 6.5, 6, 1, 6.5, 3.5, 5.5]

    this.barChartData = [{
        data: this.value,
        label: 'Insulin'
    }]

    var l = this.value.length;
    for (var i = 0; i < l; i++) {
        if (this.value[i] <= 3) {
            this.chartColors = [{
                backgroundColor: 'rgba(255, 205, 86, 9)',
                borderColor: 'rgba(255, 205, 86, 9)'
            }]
        } else if (this.value[i] > 3 && this.value[i] <= 6) {


            this.chartColors = [{
                backgroundColor: 'rgba(255, 99, 132, 62)',
                borderColor: 'rgba(255, 99, 132, 62)'
            }];

        } else if (this.value[i] > 6) {

            this.chartColors = [{
                backgroundColor: 'rgba(54, 162, 235, -12)',
                borderColor: 'rgba(54, 162, 235, -12)'

            }];

        }

    }

这行不通。谁能告诉我正确的方法

Answer 1

代码中的问题：

if (this.value <= 3) {
this.chartColors = [{
    backgroundColor: 'rgba(255, 99, 132, 62)'
}]
} 

当你编写这个 if 条件时，你完全改变了 'this.chartColors' 属性。但是您的要求是仅更改满足上述条件的输入的背景颜色。 下面的示例包含编写图表颜色的正确格式。

public chartColors: Array<any> = [
{
  backgroundColor: ['rgba(63, 191, 127,  0.4)','rgba(191, 191, 63, 0.4)'],

   borderColor: ['rgba(63, 191, 127, 0.8)', 'rgba(63, 191, 191, 0.8)'],
  hoverBackgroundColor: ['rgba(63, 191, 127, 0.6)', 'rgba(63, 191, 191, 0.6)'],
  borderWidth: 2
}];

backgroundColor 或 borderColor 或 hoverBackgroundColor 包含颜色数组。每个索引值都指向 barChartData.data 对应的索引值。

这里是 barChartData 的正确格式

 public barChartData: any[] = [{
  data: [],
  label: ''
}];

您的数据将放在 barChartData.data = [Here will be your required data]

结论是：

this.barchartData[0].data[index] 将 this.chartColors[0].backgroundColor[index] 作为条形颜色。

解决方案：

所以最后按照下面的代码你可能会解决你的问题：

for (let index = 0; index < this.barChartData[0].data.length; index++) {
  if (this.barChartData[0].data[index] > 0 && this.barChartData[0].data[index] < 3 ) {
    console.log('>0' , this.barChartData[0].data[index]);
    this.chartColors[0].backgroundColor[index] = 'rgba(63, 191, 127,  0.4)';
  }
  if (this.barChartData[0].data[index] > 3 && this.barChartData[0].data[index] < 5) {
    console.log('>3' , this.barChartData[0].data[index]);
    this.chartColors[0].backgroundColor[index] = 'rgba(191, 63, 127, 0.4)';
  }
  if (this.barChartData[0].data[index] > 5 ) {
    console.log('>5' , this.barChartData[0].data[index]);
    this.chartColors[0].backgroundColor[index] = 'rgba(191, 127, 63,  0.4)';
  }
}

这是一个示例代码。您可以根据自己的喜好赋予价值。如果您对理解我的解释有任何困难，请随时提问。

将下面的代码替换为您的代码：

public barChartData: any[] = [{
    data: this.value,
    label: 'Insulin'
}];
public chartColors: any[] = [{
   backgroundColor =[],
   borderColor = []
}];;
value = [] // This array have my values from DB like  [3.5, 2.5, 1.5, 
6.5, 6, 1, 6.5, 3.5, 5.5]

var l = this.value.length;
for (var i = 0; i < l; i++) {
    if (this.barChartData[0].data[i] <= 3) {
     this.chartColors[0].backgroundColor[i] ='rgba(255, 205, 86,9)';
     this.chartColors[0].borderColor[i] = 'rgba(255, 205, 86, 9)';           

    } else if (this.barChartData[0].data[i] > 3 &&        
     this.barChartData[0].data[i] <= 6) {
     this.chartColors[0].backgroundColor[i] ='rgba(255, 99, 132, 62)';
     this.chartColors[0].borderColor[i] = 'rgba(255, 99, 132, 62)';

    } else if (this.barChartData[0].data[i] > 6) {
     this.chartColors[0].backgroundColor[i] ='rgba(54, 162, 235,-12)';
      this.chartColors[0].borderColor[i] = 'rgba(54, 162, 235, -12)';
    }
}