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

Question

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

\n\n

TS

\n\n

  public barChartData: any[];\n  public chartColors: any[];\n    value = [] // This array have my values from DB like \xc2\xa0[3.5, 2.5, 1.5, 6.5, 6, 1, 6.5, 3.5, 5.5]\n\n    this.barChartData = [{\n        data: this.value,\n        label: \'Insulin\'\n    }]\n\n    var l = this.value.length;\n    for (var i = 0; i < l; i++) {\n        if (this.value[i] <= 3) {\n            this.chartColors = [{\n                backgroundColor: \'rgba(255, 205, 86, 9)\',\n                borderColor: \'rgba(255, 205, 86, 9)\'\n            }]\n        } else if (this.value[i] > 3 && this.value[i] <= 6) {\n\n\n            this.chartColors = [{\n                backgroundColor: \'rgba(255, 99, 132, 62)\',\n                borderColor: \'rgba(255, 99, 132, 62)\'\n            }];\n\n        } else if (this.value[i] > 6) {\n\n            this.chartColors = [{\n                backgroundColor: \'rgba(54, 162, 235, -12)\',\n                borderColor: \'rgba(54, 162, 235, -12)\'\n\n            }];\n\n        }\n\n    }\n

\n\n

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

\n

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

结论是：

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