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)'
}];
}
}
这无法解决。谁能告诉我正确的方法
答案 0 :(得分:2)
您的代码中的问题:
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)';
}
}