Buenas Quisiera que me puedan ayudar estoy creando gráficos dinámicos con la librería highcharts Consumiendo este servicio: https://api.myjson.com/bins/dd3pa
Código: https://stackblitz.com/edit/angular-wqfzez?file=src%2Fapp%2Fapp.module.ts
grafico.component.ts
En mi OnInit
export class MoraGraficoComponent implements OnInit {
DataGraficos: any[]=[];
constructor(private MoraGrafico:MoraGrafico) { }
ngOnInit() {
}
public getResult(data):void{
if(data.action==1){
if(this.aux!==data.qtoken){
this.DataGraficos=[];
this.aux=data.qtoken;
this.getRenderGraphic(data);
}
}
}
private getRenderGraphic(data):void{
console.log(data.qtoken);
this.loading=true;
this.MoraGrafico.getLoadGraphic(data.qtoken)
.subscribe((DataG)=>{
this.LoadGraphic(DataG);
this.loading=false;
})
}
LoadGraphic(data) {
this.DataGraficos=[];
for(var i=1;i<=data.filter(c=>c['0']=='-1').map(c=>c[2]);i++)
{
jQuery(data.filter(c=>c['0']==i).map(c=>c[2])).highcharts({
xAxis: {
categories: data.filter(c=>c['0']==i).map(c=>c[3]),
crosshair: true
},
yAxis: {
title: {
text: 'En miles',
style: {
fontWeight: 'bold'
},
},
},
chart: {
borderColor: "#164D90",
borderWidth: 2,
height: 300,
type: 'line'
},
legend: {
symbolRadius: 0
},
title: {
text: '<b>'+data.filter(c=>c['0']==i).map(c=>c[2]).pop()+'</b>',
style: {
color: '#164D90',
fontWeight: 'bold'
}
},
tooltip: {
shared: true
},
subtitle: {
useHTML: true,
text: '<table>'+
'<tr style="color:green"><td>Brecha: </td><td style="text-align: right"><b>' + data.filter(c=>c['0']==i).map(c=>c[6]).pop() + '</b></td></tr>'+
'</table>',
align: 'right'
},
credits: {
enabled: false
},
series: [{
color: '#0191CE',
type: 'line',
name: "TAM Inversion",
data: data.filter(c=>c['0']==i).map(c=>c[4]),
},{
color: 'green',
type: 'line',
name: "TAM Stock de Mora Real Neta",
data: data.filter(c=>c['0']==i).map(c=>c[5]),
}]
});
this.DataGraficos.push(data.filter(c=>c['0']==i).map(c=>c[2])[0]);
console.log(this.DataGraficos);
}
}
}
En mi grafico.component.html
<div class="row">
<div class="col-md-6 col-sm-6 col-lg-6" *ngFor="let graficos of DataGraficos" [id]="graficos"><br>
</div>
</div>
En mi Grafico.service.ts
import {Injectable} from '@angular/core';
import {HttpHeaders,HttpClient} from '@angular/common/http'
import {Observable,of, Subject} from 'rxjs';
import {catchError,tap} from 'rxjs/operators';
@Injectable({providedIn:'root'})
export class MoraGrafico{
//private Url='http://172.20.8.68:8080/cores2/strategos_rmda/ppto-res'
//private Url = 'https://stg.confianza.pe:9853/cores2/strategos_rmda/ppto-res';
private Url = 'http://localhost:8080/strategos_rmda/brecha-mora';
private atoken=JSON.parse(localStorage.getItem('currentUserDomain'))["token"];
constructor(private http:HttpClient){
}
getLoadGraphic(qtoken: String):Observable<String[]>{
return this.http.get<String[]>('https://api.myjson.com/bins/qnthy');
}
}
Cuando le dado el console. me arroja resultado
Al momento de ejecutar me arroja un error : core.js:15713 ERROR Error: Highcharts error #13
Renderizado div no encontrado Este error ocurre si la opción chart.renderTo está mal configurada para que Highcharts no pueda encontrar el elemento HTML para representar el gráfico. Si usa una ID de DOM al crear el gráfico, asegúrese de que exista un nodo con la misma ID en algún lugar del DOM.
NO SE VISUALIZA EL GRAFICO
ngOnInit
. Pero encontre donde estas llamando highcharts, esta dentro de tu metodoLoadGraphic
. He escrito una respuesta, espero te sea de utiildad, pero no veo donde se llame el metodoLoadGraphic