angular - 在 ng2-chart 中设置柱状图的颜色

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

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)'

            }];

        }

    }

这行不通。有人能告诉我正确的做法吗？

答案＃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=[这里将是你所需的数据]

结论是：

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