ficha.html
<mat-form-field> <mat-select formControlName="selectedValue" > <mat-option (click)="TokenPrice()" *ngFor="let c of value" [value]="c.viewValue">{{c.value}}</mat-option> </mat-select> </mat-form-field>token.ts
value:coins[] = [ {value:'USDT', viewValue:'0xdAC17F958D2ee523a2206206994597C13D831ec7'}, {value:'BUSD', viewValue:'0xdAC17F958D2ee523a2206206994597C13D831ec7'}, {value:'SHIB', viewValue:'0x95aD61b0a150d79219dCF64E1E6Cc01f0B64C4cE'}, {value:'WBTC', viewValue:'0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599'}, ]obteniendo el valor seleccionado como
get selectedValue():FormControl{ return this.loginForm.get("selectedValue") as FormControl }para cada selección desplegable, devuelve el precio del token. El precio del token sigue cambiando según la selección.
async TokenPrice(){ this.TokenUsdPrice = await Promise.all( await this.blocks.map(async (e,i)=> await Moralis.Web3API.token.getTokenPrice({address:this.selectedValue.value,to_block:e.block}) )) this.filtereTokenPrice(); }Quiero mostrar TokenPrice (Dinámico) en el eje X y Fechas (constante) en el eje Y.
async filtereTokenPrice(){ this.usd = await this.TokenUsdPrice.map(item=>item.usdPrice);//get usdprice this.chart = new Chart('canvas',{ type:'line', data:{ labels:this.service.getdates(), datasets:[ { data:this.usd, borderWidth:1, fill:false } ] } }) }esto funciona solo para 1 selección y se muestra según sea necesario. Cuando selecciono otras opciones obtengo
Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.¿Cómo actualizo los valores del eje X para cualquier otra selección? Si necesita más información o stackslibz, hágamelo saber. Gracias.
.destroy()
Use esto para destruir cualquier instancia de gráfico que se cree. Esto limpiará todas las referencias almacenadas en el objeto de gráfico dentro de Chart.js, junto con los detectores de eventos asociados adjuntos por Chart.js. Esto debe llamarse antes de que el lienzo se reutilice para un nuevo gráfico.
https://www.chartjs.org/docs/latest/developers/api.html#destroy
async filtereTokenPrice(){ this.usd = await this.TokenUsdPrice.map(item=>item.usdPrice);//get usdprice this.chart.destroy(); // <----- this.chart = new Chart('canvas',{ type:'line', data:{ labels:this.service.getdates(), datasets:[ { data:this.usd, borderWidth:1, fill:false } ] } }) } <canvas id="canvas"></canvas> @ViewChild('chart') chart;