Я создал Highchart с пользовательским фильтром диапазона. Данные диаграммы загружаются из веб-службы. Я называю этот сервис из метода ngOnInit. Как это
TS
import { Component, OnInit } from "@angular/core";
import * as Highcharts from "highcharts/highstock";
import { HttpClient } from "@angular/common/http";
import * as moment from "moment";
declare var require: any;
require("highcharts/highcharts-more")(Highcharts);
require("highcharts/modules/exporting")(Highcharts);
require("highcharts/modules/export-data")(Highcharts);
@Component({
selector: "app-root",
templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
seriesOptions: any = [];
ranges: any;
pickerlang: any;
seriesCounter = 0;
names = ["MSFT", "AAPL"];
selected: any;
chart: any;
updateFromInput = false;
Highcharts = Highcharts;
chartConstructor = "stockChart";
chartCallback: any;
chartOptions: any;
constructor(private http: HttpClient) {
const self = this;
this.chartCallback = chart => {
self.chart = chart;
};
}
ngOnInit() {
moment.locale("es");
this.names.forEach((element, i) => {
this.http
.get(
"https://www.highcharts.com/samples/data/" +
element.toLowerCase() +
"-c.json"
)
.forEach((data: any) => {
this.seriesOptions[i] = {
name: element,
data: data
};
this.seriesCounter += 1;
if (this.seriesCounter === this.names.length) {
this.createGraph();
}
});
});
this.ranges = {
Hoy: [moment(), moment()],
Ayer: [moment().subtract(1, "days"), moment().subtract(1, "days")],
"Últimos 7 días": [moment().subtract(6, "days"), moment()],
"Últimos 30 días": [moment().subtract(29, "days"), moment()],
"Este mes": [moment().startOf("month"), moment().endOf("month")],
"Mes pasado": [
moment()
.subtract(1, "month")
.startOf("month"),
moment()
.subtract(1, "month")
.endOf("month")
]
};
this.pickerlang = {
format: "DD/MM/YYYY",
direction: "ltr",
weekLabel: "W",
cancelLabel: "Cancelar",
applyLabel: "Aceptar",
clearLabel: "",
daysOfWeek: moment.weekdaysMin(),
monthNames: moment.monthsShort(),
customRangeLabel: "Seleccionar fecha",
firstDay: 1
};
}
createGraph() {
this.chartOptions = {
lang: {
loading: "Cargando...",
months: [
"Enero",
"Febrero",
"Marzo",
"Abril",
"Mayo",
"Junio",
"Julio",
"Agosto",
"Septiembre",
"Octubre",
"Noviembre",
"Diciembre"
],
weekdays: [
"Domingo",
"Lunes",
"Martes",
"Miércoles",
"Jueves",
"Viernes",
"Sábado"
],
shortMonths: [
"Ene",
"Feb",
"Mar",
"Abr",
"May",
"Jun",
"Jul",
"Ago",
"Sep",
"Oct",
"Nov",
"Dic"
],
rangeSelectorFrom: "Desde",
rangeSelectorTo: "Hasta",
rangeSelectorZoom: "Período",
downloadPNG: "Descargar imagen PNG",
downloadJPEG: "Descargar imagen JPEG",
downloadPDF: "Descargar imagen PDF",
downloadSVG: "Descargar imagen SVG",
downloadCSV: "Descargar imagen CSV",
downloadXLS: "Descargar imagen XLS",
printChart: "Imprimir",
resetZoom: "Reiniciar zoom",
resetZoomTitle: "Reiniciar zoom",
viewData: "Ver tabla",
openInCloud: "Ver en web",
thousandsSep: ",",
decimalPoint: "."
},
xAxis: {
crosshair: {
width: 1,
color: "red"
}
},
rangeSelector: {
enabled: false
},
chart: {
zoomType: "x",
panning: true,
panKey: "shift"
},
exporting: {
enabled: true
},
plotOptions: {
series: {
showInNavigator: true
}
},
tooltip: {
pointFormat:
'<span style="color:{series.color}">{series.name}</span>: <b>{point.y} litros</b><br/>',
valueDecimals: 2,
split: true
},
series: this.seriesOptions
};
}
setExtremes() {
const self = this,
chart = self.chart;
chart.showLoading();
setTimeout(() => {
chart.hideLoading();
chart.xAxis[0].setExtremes(
new Date(
this.selected["startDate"].toJSON().substring(0, 10)
).getTime(),
new Date(this.selected["startDate"].toJSON().substring(0, 10)).getTime()
);
self.updateFromInput = true;
}, 1000);
}
}
HTML
<div class="card">
<div class="card-body">
<input type="text" ngxDaterangepickerMd [locale]="pickerlang" [(ngModel)]="selected" class="form-control"
placeholder="Rango de fecha" class="form-control" [ranges]="ranges" [showCustomRangeLabel]="true"
[alwaysShowCalendars]="true" />
<highcharts-chart id="container" [Highcharts]="Highcharts" [constructorType]="chartConstructor"
[options]="chartOptions" [callbackFunction]="chartCallback" [(update)]="updateFromInput" [oneToOne]="true">
</highcharts-chart>
<button (click)=" setExtremes()" class="btn btn-primary">Buscar </button>
</div>
</div>
Диаграмма пытается загрузить данные перед запуском ngOninit, поэтому вернитесь в console.log
Невозможно прочитать свойство 'series' из неопределенного
В любом случае, все работает, у диаграммы есть данные, и фильтр в порядке, но я хочу, чтобы диаграмма подождала, пока ngOnit покажет данные, чтобы избежать отображения этой ошибки в консоли.
Итак, вопрос: как я могу заставить highchart ждать ngOnInit?
РЕШЕНИЕ
Полный код решения: https://github.com/ElHombreSinNombre/angular-highcharts