Setting color for bar chart in ng2-chart

蹲街弑〆低调 提交于 2019-12-13 04:01:21

问题


I am trying to set colors for bars in bar graph according to the range of values.

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

            }];

        }

    }

This is not working out. Can any one tell me right way to do it


回答1:


The problem in your code :

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

When you are writing this if condition you are completely changing the 'this.chartColors' property. But your requirement is to change only the background color for those input which satisfy the mentioned condition. The below example contains the right format for writing chart colors.

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
}];

The backgroundColor or borderColor or hoverBackgroundColor contains array of colors. Each index value points to curesponding index value of the barChartData.data.

Here is the right format to write barChartData

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

Your data will be placed in barChartData.data = [Here will be your required data]

The conclusion is:

this.barchartData[0].data[index] will have this.chartColors[0].backgroundColor[index] as bar color.

Solution:

So Finally Follow the below code you may solve you issue:

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

This one is a sample code.You give value according to your preference. If you find any difficulty in understanding my explanation feel free to ask.

Replace the below with your code :

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


来源:https://stackoverflow.com/questions/54178977/setting-color-for-bar-chart-in-ng2-chart

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!