我有一个图表,在同一个画布中创建新图表之前,我调用myccc.destroy();
并且效果很好。
但是,如果我创建图表的图像,之后如果我创建新图表,图像仍然存在。显然,我需要在重绘图表之前删除图表的图像以及图表本身。
我试过了;
$("#dialog_chart_img").remove();
$(".dialog_chart_img_div").append('<img id="dialog_chart_img" style="width: 655px; height: 580px; margin-top: 40px;" />');
if (myccc != undefined || myccc != null) {
myccc.destroy();
}
var ctx = document.getElementById('dialog_chart');
var myccc = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: array_zaman,
datasets: [{
label: "Yumurta",
data: array_adet,
}]
},
options: {
maintainAspectRatio: true,
responsive: true,
// maintainAspectRatio: true,
legend: {
display: false
},
animation: {
duration: 1,
onComplete: function(animation) {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize = 16, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily = "charter");
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y);
});
});
document.querySelector('#dialog_chart').remove();
document.querySelector('#dialog_chart_img').setAttribute('src', this.toBase64Image());
}
}
}
});
HTML:
<div class="dialog_chart_img_div">
<img id="dialog_chart_img" style="width: 655px; height: 580px; margin-top: 40px;" /> <br> <br>
<canvas id="dialog_chart" style="visibility:hidden;"></canvas>
</div>
如何在创建新图表后重新加载图像?
答案 0 :(得分:0)
我不确定我是否了解您的问题,但是您不能通过执行myccc.update()来重绘图表吗?