Установка цвета для гистограммы в ng2-chart - PullRequest
Новая
       11

Установка цвета для гистограммы в ng2-chart

0 голосов
/ 14 января 2019

I need like this Я пытаюсь установить цвета для столбцов на гистограмме в соответствии с диапазоном значений.

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 Ответ

0 голосов
/ 14 января 2019

Проблема в вашем коде: 

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