雷达图Js-数据的边框颜色

时间:2019-07-11 10:57:38

标签: javascript angular chart.js ionic4 radar-chart

我在离子4角7上使用图表js中的雷达图,我必须针对每个不同的值更改数据的边框颜色。所以我尝试测试更改pointBackgroundColors及其工作,但我不知道更改borderColor。 我尝试了与使用borderColor的pointBackgroundColors相同的技巧,但是它没有用,所以如果有人对它有所帮助,可以帮助我^^

我的应用程序的图像带有pointBackgroundColors:

Image of my app

您可以看到我的代码的一部分:

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

0 个答案:

没有答案