Радар Диаграмма Js - Цвет границы по данным - PullRequest
Новая
       48

Радар Диаграмма Js - Цвет границы по данным

0 голосов
/ 11 июля 2019

Я использую радарный график из диаграммы JS на ионном 4 Угловом 7, и мне нужно изменить цвет границы данных для каждого отдельного значения. Поэтому я пытаюсь проверить, чтобы изменить pointBackgroundColors и его работы, но я не имею ни малейшего представления, чтобы изменить borderColor. Я пытаюсь использовать те же приемы, что и pointBackgroundColors, с помощью borderColor, но это не сработало, поэтому, если у кого-то возникнет мысль об этом, помогите мне ^^

Есть изображение моего приложения с pointBackgroundColors:

Изображение моего приложения

И вы можете увидеть часть моего кода, чтобы сделать это: 

pointBackgroundColors = [];
private datasets = [
{
  backgroundColor: 'rgba(0, 0, 0, 0)',
  borderWidth: 10,
  borderColor: 'rgba(86, 168, 67, 1)',
  pointBackgroundColor: this.pointBackgroundColors,
  pointBorderColor: 'rgba(0, 0, 0, 0)',
  data: [3, 3, 4, 4, 3, 2, 2, 4, 3, 3, 4, 3, 4, 2, 3, 3, 4, 3, 2, 3, 4, 4, 3, 4]
},

{
  backgroundColor: '#dee4f2',
  borderWidth: 0,
  borderColor: '#fff',
  pointBackgroundColor: 'rgba(0, 0, 0, 0)',
  pointBorderColor: 'rgba(0, 0, 0, 0)',
  data: [7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7]
},

{
  backgroundColor: '#fff',
  borderColor: '#4b7eff',
  pointBorderColor: '#4b7eff',
  pointBackgroundColor: '#4b7eff',
  data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},
];
i;
private bars = this.datasets[0].data;
changeBorderColor(){
for(this.i=0;this.i<this.bars.length;this.i++){
  var color="green";
  //You can check for bars[i].value and put your conditions here
  if(this.bars[this.i]<3){
    console.log('noir')
    this.pointBackgroundColors.push('rgba(0, 0, 0, 1)')
  }
  else if(this.bars[this.i]<4){
    console.log('rouge')
    this.pointBackgroundColors.push('rgba(255, 0, 0, 1)')

  }
  else if(this.bars[this.i]<5){
    console.log('vert')
    this.pointBackgroundColors.push('rgba(0, 255, 0, 1)')
  }
  else{
    console.log('bleu')
    this.pointBackgroundColors.push('rgba(0, 0, 255, 1)')
  }
}
}
...