Ошибка Chart js в angular: Canvas уже используется. Диаграмма с идентификатором «0» должна быть уничтожена, прежде чем холст можно будет использовать повторно. Исправить?
Итак, в основном, при нажатии div (jquery) у меня есть модальное всплывающее окно начальной загрузки с диаграммой. Диаграмма работает нормально, рендеринг идеален, проблема возникает, когда я нажимаю другой элемент div.
Вот мой HTML
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog">
<div class = "modal-dialog">
<div class = "card">
<div class = "text-right cross"> hello<i class = "fa fa-times"></i> </div>
<div id = "chartDiv" *ngIf = "chart"><canvas #chart>{{ chart }}</canvas></div>
</div>
</div>
</div>
Отдельно я использую Chart.register(...registerables) в своем конструкторе. Вот мой TS (только соответствующий код):
import { Chart, registerables } from 'chart.js';
export class HomeComponent implements OnInit{
@ViewChild('chart') canvas: ElementRef;
chart: any = [];
ngOnInit(): void {
$('#myModal').on('hide.bs.modal', function () {
$(".canvas").remove();
})
$('#myModal').on('show.bs.modal', function () {
$("div.chart").append('<canvas #chart>{{chart}}</canvas>');
$('#chart').trigger('focus')
})
}
divClick()
{
$('#myModal').modal('show');
this.chart = this.getChartData()
}
getChartData(): Chart {
this.chart = new Chart(this.canvas.nativeElement.getContext('2d'), {data})
//please don't worry about data its coming from api and it works fine
return this.chart
}
}
Это все просто очень высокий уровень, но я буду рад включить любой другой необходимый код. Я исследовал так много статей и способов исправить эту ошибку, но не смог найти ни одной. Если вы можете указать мне ресурс, где Chart js реализован с использованием Angular, это было бы полезно. Кроме того, я попробовал функцию «уничтожить» на this.chart, но это тоже не работает. Есть ли другой способ использовать это, а не открывать холст. Просто не знаю, что я делаю неправильно. Я даже пытался удалить и повторно добавить классы холста через jquery (в onInit), но это тоже не работает. (Chartjs v3.7.0)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ты все делаешь правильно, и ты так близок. Я считаю, что нет необходимости что-либо хранить в this.chart. Просто вернитесь и визуализируйте. Чтобы исправить ошибку с несколькими экземплярами, просто добавьте проверку существования диаграммы перед рендерингом.
divClick()
{
var chartExist = Chart.getChart("myChart"); // <canvas> id
if (chartExist != undefined)
chartExist.destroy();
$('#myModal').modal('show');
this.getChartData()
}
getChartData(): any {
return new Chart(this.canvas.nativeElement.getContext('2d'), {data})
}
В вашем HTML просто добавьте идентификатор для диаграммы
<canvas id = "myChart" #chart>{{ chart }}</canvas>