我有一个代码,可以在选择下拉列表后更新图形的数据。但是,当我选择一个选项时,它看起来像新的图形和旧的图形同时停留在同一 Canvas 上。
这是我的代码:
funcao(){
this.graphicService.getDatas().subscribe(datas => {
this.datas = datas; //Gets the data from the API and put on local datas variable
if(this.data[0].dimension == "Tech")
{
this.counter=0;
}
else if(this.data[0].dimension == "Bus"){
this.counter=1;
}
this.barChartData = { //Bar graphic data
labels: ["Entry", "Foundation"],
datasets: [{
label: this.datas[this.counter].subdimensions[0].name,
backgroundColor: 'rgba(37, 230, 131,0.7)'
data: [
this.datas[this.counter].subdimensions[0].entry,
this.datas[this.counter].subdimensions[0].foundation
]
}]
};
this.canvas = document.getElementById('myChart');
this.ctx = this.canvas.getContext('2d');
let myChart = new Chart(this.ctx, { // Bar graphic configs
type: 'bar',
data: this.barChartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
});
}
HTML
<select [(ngModel)]="data[0].dimension" (change)="funcao()" class="form-control">
<option *ngFor="let data of datas" [value]="data.dimension">{{ data.dimension }}</option>
</select>
<canvas id="myChart"></canvas>
我要做的是旧图形消失,只有新的图形保留在屏幕上。
最佳答案
似乎您正在使用ChartJS库。在这种情况下,可以使用 destroy()
方法销毁图表的任何先前实例。
ojiɪʀꜱᴛ
在您的图表组件类中添加一个属性(将在其中存储图表实例):
public myChart: Chart
ꜱᴇᴄᴏɴᴅ
在创建新实例之前检查并销毁图表实例(如果有):
...
if (this.myChart) this.myChart.destroy(); //destroy prev chart instance
this.myChart = new Chart(this.ctx, {
type: 'bar',
data: this.barChartData,
...