Я создаю высокие графики, похожие на это в угловых (v8).Я хочу удалить фильтр по умолчанию и создать один пользовательский с помощью ngx daterangepicker .Мне нужно отфильтровать массив, но это сложный массив .Я пытаюсь создать несколько итераций с помощью foreach, но не работает.
Это мой код TS
import { Component, OnInit } from "@angular/core";
import { fadeAnimation } from "../../../../animations.component";
import { StockChart } from "angular-highcharts";
import { HttpClient } from "@angular/common/http";
import * as Highcharts from "highcharts";
import * as moment from "moment";
declare let AdminLTE: any;
@Component({
selector: "app-metergraph",
templateUrl: "./graph.component.html",
styleUrls: ["./graph.component.scss"],
animations: [fadeAnimation]
})
export class MetersGraphComponent implements OnInit {
chart: StockChart;
seriesOptions: any = [];
ranges: any;
pickerlang: any;
seriesCounter = 0;
names = ["MSFT", "AAPL"];
constructor(private http: HttpClient) {}
ngOnInit(): void {
AdminLTE.init();
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 = {
Today: [moment(), moment()],
Yesterday: [moment().subtract(1, "days"), moment().subtract(1, "days")],
"Last 7 Days": [moment().subtract(6, "days"), moment()],
"Last 30 Days": [moment().subtract(29, "days"), moment()],
"This Month": [moment().startOf("month"), moment().endOf("month")],
"Last Month": [
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(),
firstDay: 1
};
Highcharts.setOptions({
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: "."
}
});
}
createGraph() {
this.chart = new StockChart({
xAxis: {
crosshair: {
width: 1,
color: "red"
}
},
rangeSelector: {
enabled: false
},
chart: {
zoomType: "x",
panning: true,
panKey: "shift"
},
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
});
}
change(data: any) {
console.log(data["startDate"].toJSON().substring(0, 10));
console.log(data["endDate"].toJSON().substring(0, 10));
this.seriesOptions.forEach((element: any) => {
// console.log(element);
element["data"].forEach(index => {
//console.log(index[0]);
index.forEach((datetime: any) => {
console.log(datetime); //MULTIPLE ITERATIONS FAIL, MAYBE HIGHCHART HAVE A FUNCTION TO FILTER ARRAY WITH FIELD VALUES.
});
});
// console.log(element["data"]);
//console.log(element["data"][0]);
});
}
}
И это мой HTML
<div class="content-wrapper">
<section class="content-header">
<section class="content">
<div class="panel panel-default">
<div class="panel-heading">
<h5>
<b>Test</b>
</h5>
</div>
<div class="panel-body">
<input type="text" ngxDaterangepickerMd [locale]="pickerlang" [(ngModel)]="selected" class="form-control"
placeholder="Rango de fecha" (ngModelChange)="change($event)" [ranges]="ranges"
[showCustomRangeLabel]="true" [alwaysShowCalendars]="true" />
<div [chart]="chart"></div>
</div>
</div>
</section>
</section>
</div>
Наконец-то ядобавить экран страницы.
Итак, вопрос: как я могу фильтровать этот тип массива по значениям таймера?Ошибка итерации.Возможно, в старшей диаграмме есть функция для отправки значений полей и фильтрации.