Question

几天来，我一直在寻找一种更改条形图指示器颜色的方法。它是一个离子角3.9.2应用程序。我尝试了许多发布在这里的变通办法，但是都没有用。我找到了自己的方式，但barchart的行为确实很奇怪。首先，我必须放置一个按钮来重新运行带有API调用的函数，该调用将数据带到我的图形中，因为它不会显示该函数是否仅运行一次。另一方面，列会变得很薄。

图，如果我不使用show标志（正常加载） https://user-images.githubusercontent.com/16280628/45188356-56c57b80-b20a-11e8-879b-a6d1ed7430d1.png

如果我做的话（点击按钮加载） https://user-images.githubusercontent.com/16280628/45188227-e0287e00-b209-11e8-8e05-ab6568eeb6d3.png

谢谢，任何帮助将不胜感激

信息：

  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.11.0",
    "@ionic-native/splash-screen": "~4.11.0",
    "@ionic-native/status-bar": "~4.11.0",
    "@ionic/storage": "2.1.3",
    "chart.js": "^2.7.2",
    "cordova-android": "~7.0.0",
    "cordova-plugin-device": "2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^2.0.0",
    "cordova-plugin-splashscreen": "5.0.2",
    "cordova-plugin-whitelist": "1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "ng2-charts": "^1.6.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"

代码：

HTML：

   <div style="display: block" *ngIf="show">
    <canvas baseChart height="" 
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [colors]="barChartColors"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>

JS：

public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true,
legend: {display:false},
scales: {
yAxes: [{id: 'y-axis-1', type: 'linear', position: 'left', ticks: {min: 0, max:60}}]
}
};

public barChartLabels:string[] = ['L', 'M', 'M', 'J', 'V', 'S', 'D'];
public barChartType:string = 'bar';
public barChartLegend:boolean = true;

public barChartData:any[] = [
{data: [0]}
]; 

public barChartColors:Array<any> = [{}];
leerDatos() {       //FUNCTION THAT MAKES THE API CALL

//clear out the previous array contents
this.info_items = [];
this.datos_actividad = [];
this.datos_color = [];
this.errorConexion = false;

//Create the loading indicator
let loader = this.loadingCtrl.create({
content: "Obteniendo perfil de usuario..."
});

//Show the loading indicator    
loader.present();

this.serviceWiseapp.obtenerActividadFisica().then(
data => {

loader.dismiss();


if (data) {

//cWe have data, so lets do something with it
this.info_items = this.formatInfoItems(data.actividadFisica);

for(let i=0; i < this.info_items.length; i++){
this.datos_actividad[i] = this.info_items[i].duracionActividadFisica;
}
this.barChartData = this.datos_actividad;

this.barChartColors[0].backgroundColor = 

this.obtenerColores(this.info_items);  // Only way ive 
                                                                                                    //found to change color dinamically
    this.errorConexion = false;



// console.log(this.barChartData);

this.show=true;
//this.barChartColors = this.datos_color;
} else {
//This really should never happen
this.errorConexion = true;
}

},
error => {

//Hide the loading indicator
loader.dismiss();
this.errorConexion = true;
}
);
}

...

private obtenerColores(info_items:any){
let tmpArray:any = [];

if (info_items) {

for (let i = 0; i < info_items.length; i++) { 
if(info_items[i].duracionActividadFisica >= 35){
tmpArray.push(          
'rgba(0, 192, 0, 0.6'
);  
}else if(info_items[i].duracionActividadFisica >= 20){
tmpArray.push(          
'rgba(255,255,0,0.6)'
);  
}else {
tmpArray.push(          
'rgba(255, 25, 25, 0.6)'
);  
}    
}
};

return tmpArray;
}

ng2-charts动态更改图表颜色使图表表现异常

0 个答案: