typescript - Chart.js 不显示
我正在尝试显示一个带有动态数据的图表，但它没有显示。如果我直接写数据，它是可行的。这是变量的声明，我尝试了两种形式，其中一种被注释掉了。
//Variable con los datasets de los gráficos
//datasets: [{ label: string, data: [{ x: string, y: number }] }] = [{ label: '', data: [{ x: '', y: 0 }] }];
datasets: [{ label: string, data: number[] }] = [{ label: '', data: [] }];
newDataset: {label:string, data:number[], borderColor: string } = {label:'', data:[], borderColor:''};
//Variable para el objeto data de cada dataset a mostrar en el grafico
//data: [{ x: string, y: number }] = [{ x: '', y: 0 }];
data: number[]=[];
//Array con las etiquetas del eje x del gráfico
etiquetas: string[] = [];
......
Chart.register(...registerables);
let canvasCo2 = document.getElementById('grafico') as HTMLCanvasElement;
console.log("antes del grafico:");
let grafico = new Chart(canvasCo2, {
type: 'line',
data: {
labels:this.etiquetas,
datasets:[]
}
});
我输入了来自：
this.etiquetas.push(this.fultima.toString());
this.newDataset.data.push(Number((this.co2 / this.contaMedidasHora).toFixed()));
this.newDataset.label = this.dispService.getNombre(this.informeService.parametros.codigos[i]),
this.newDataset.borderColor = this.obtenerColor();
在控制台浏览器中，我看到了带有数据数组的数据集，但看不到图表。首先我看到了标签数组，然后是数据集数组的控制台结果
这是我的图表声明：
grafico.config.data.datasets.push(this.newDataset);
grafico.config.data.labels=this.etiquetas;
....
grafico.update();
console.log("Grafico pintado")
我做错了什么？谢谢大家。
我用一个新变量做了一个测试，并用它以及我的 RES 变量进行了 console.log，然后我看到一个区别。用测试变量我能看到图表，而用我的 RES 变量则看不到。在 console.log 中 RES 被定义为 []，而 TEST（prueba）被定义为 [{}]，我认为这是问题，但我不知道如何修复它。
完整代码
import { formatDate } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { DispService } from 'src/app/servicios/disp.service';
import { InformeService } from 'src/app/servicios/informe.service';
import { MedidasCo2Service } from 'src/app/servicios/medidasCo2.service';
import moment from 'moment/moment.js';
import { Chart, registerables } from 'chart.js';
@Component({
selector: 'app-informe-medidas-co2',
templateUrl: './informe-medidas-co2.component.html',
styleUrls: ['./informe-medidas-co2.component.css']
})
export class InformeMedidasCo2Component implements OnInit {
//Variable con los datasets de los gráficos
//datasets: [{ label: string, data: [{ x: string, y: number }] }] = [{ label: '', data: [{ x: '', y: 0 }] }];
//datasets: [{ label: string, data: number[], borderColor:string }] = [{ label: '', data: [], borderColor:'' }];
//newDataset: {label:string, data:number[], borderColor: string } = {label:'', data:[], borderColor:''};
//Variable para el objeto data de cada dataset a mostrar en el grafico
//data: [{ x: string, y: number }] = [{ x: '', y: 0 }];
data: number[]=[];
//Array con las etiquetas del eje x del gráfico
etiquetas: string[] = [];
//Fecha con la hora para calcular las medias de las medidas de esa hora
fecha: string = formatDate('01/01/1900 00:00', 'dd/MM/yyyy HH:mm', 'es');
//Contador de medidas por hora, irá de 1 a 12 que son las máximas
contaMedidasHora: number = 0;
//variable con el co2 medio calculado
co2: number = 0;
//Variable que indica si se tiene que grabar la medida con la media de la hora
grabar: boolean = false;
//Conversión de fechas a tipo date válido
fdesde: Date = new Date();
fhasta: Date = new Date();
//Variable para grabar la ultima medida calculada
fultima: string = '';
//Variable para obtener aleatoriamente un color de línea del gráfico
color: string = "#";
constructor(private medidasCo2Service: MedidasCo2Service,
private informeService: InformeService,
private dispService: DispService) { }
ngOnInit() {
this.fdesde = new Date(moment(this.informeService.parametros.fdesde, 'DD/MM/YYYY HH:mm:SS').format('YYYY-MM-DD 00:00:00'));
this.fhasta = new Date(moment(this.informeService.parametros.fhasta, 'DD/MM/YYYY HH:mm:SS').format('YYYY-MM-DD 23:59:59'));
let datasets=[{}];
// Chart.register(...registerables);
// let canvasCo2 = document.getElementById('grafico') as HTMLCanvasElement;
// console.log("antes del grafico:");
// let grafico = new Chart(canvasCo2, {
// type: 'line',
// data: {
// labels:this.etiquetas,
// datasets:[]
// }
// });
const p = new Promise((resolve, reject) => {
console.log("2.calculando medidas");
//Inicializamos el array de datasets del gráfico, habrá tantos como códigos de dispositivos ha seleccionado en la pantalla
datasets.splice(0, datasets.length);
//Recorrer el array con los códigos de dispositivos
for (let i = 0; i < this.informeService.parametros.codigos.length; i++) {
//this.newDataset.label = this.dispService.getNombre(this.informeService.parametros.codigos[i]),
//this.newDataset.borderColor = this.obtenerColor();
//Buscar las medidas por dispositivo
this.medidasCo2Service.getMedidas(this.informeService.parametros.codigos[i]).subscribe((data: { status: number; respuesta: any[]; }) => {
//Si ha encontrado medidas
if (data.status == 200) {
//Filtrar las medidas por las fechas seleccionadas como parámetros en la pantalla
let respuesta_corta = data.respuesta.filter((x: { createdAt: string | number | Date; }) => {
return new Date(x.createdAt).getTime() >= this.fdesde.getTime()
&& new Date(x.createdAt).getTime() <= this.fhasta.getTime();
});
//Inicializar el array con las medidas de cada dispositivo
this.data.splice(0, this.data.length);
//Con cada medida se calculan las medias por hora y se graban en el array de datos
for (let j = 0; j < respuesta_corta.length; j++) {
this.calcularMediasHora(formatDate(respuesta_corta[j].createdAt, 'dd/MM/yyyy HH:00', 'es'), Number(respuesta_corta[j].CO2));
this.fultima = formatDate(respuesta_corta[j].createdAt, 'dd/MM/yyyy HH:00', 'es');
}
//Se ha finalizado el bucle sin grabar la última medida
this.data.push( Number((this.co2 / this.contaMedidasHora).toFixed()) );
//this.newDataset.data.push(Number((this.co2 / this.contaMedidasHora).toFixed()));
this.etiquetas.push(this.fultima.toString());
//Una vez calculadas todas las medias por hora de todas las medidas encontradas
//para ese dispositivo entre las fechas seleccionadas, se graba el dataset para
//el grafico.
datasets[i]={
label: this.dispService.getNombre(this.informeService.parametros.codigos[i]),
data: this.data,
//data: [5,10,15,20,41,23,34,15,63,21],
borderColor: this.obtenerColor()
};
//grafico.config.data.datasets.push(this.newDataset);
//grafico.config.data.labels=this.etiquetas;
}
});
}
console.log("antes de resolve:", datasets);
resolve(datasets);
});
console.log('1. Proceso iniciado..');
p.then(res => {
console.log("3.RES:", res)
this.verGrafico(res);
//grafico.update();
})
}
calcularMediasHora(hora: string, co2: number) {
if (this.fecha == "01/01/1900 00:00") {
this.fecha = hora;
}
if (this.fecha != hora) {
//se ha cambiado de hora, se guardan los valores almacenados
//y se inicia nueva hora con los nuevos valores
this.data.push( Number((this.co2 / this.contaMedidasHora).toFixed()) );
this.etiquetas.push(this.fecha.toString());
//this.newDataset.data.push(Number((this.co2 / this.contaMedidasHora).toFixed()));
this.co2 = co2;
this.contaMedidasHora = 1;
this.fecha = hora;
} else { //es la misma hora, se acumulan los datos
this.grabar = false;
this.co2 += co2;
this.contaMedidasHora++;
}
}
verGrafico(res: any): boolean {
//Visualizamos los gráficos
Chart.register(...registerables);
let canvasCo2 = document.getElementById('grafico') as HTMLCanvasElement;
console.log("ETIQUETAS antes del grafico:",this.etiquetas);
console.log("RES antes grafico", res);
let prueba = [
{
borderColor: "#7C66B2",
data: this.data,
label: "con medidas"
},
{
borderColor: "#7C6623",
data: [467,345,654,465,544],
label: "con medidas 2222"
}
];
console.log("prueba:",prueba);
let grafico = new Chart(canvasCo2, {
type: 'line',
data: {
labels:this.etiquetas,
//datasets:res
datasets: prueba
}
});
console.log("Grafico pintado")
return true;
}
obtenerColor():string {
let color: string = "#";
let simbolos: string = "0123456789ABCDEF"
for (let i = 0; i < 6; i++){
color = color + simbolos[Math.floor(Math.random()*16)];
}
return color;
}
}