如何在放大後重置圖形/圖表，使用圖表進行平移

Question

我最近在我的折線圖中添加了放大和平移功能。現在我想添加一個重置按鈕或類似的東西時，按下圖形回到正常位置/形狀。目前我正在繪製它的動態數據，每10秒更新一次。

ThankYou提前。

Answer 1

有多種方法可以做到這一點：

嘗試任何這些：

1 .clear（）

2. .destroy（）

myLineChart.destroy(); 

然後重新初始化圖表：

var ctx = document.getElementById("myChartLine").getContext("2d"); 
myLineChart = new Chart(ctx).Line(data, options); 

刪除的元素，然後reappending一個新的父容器

var resetCanvas = function() {

$('#results-graph').remove(); // this is my <canvas> element 

    $('#graph-container').append('<canvas id="results-graph"><canvas>'); 

    canvas = document.querySelector('#results-graph'); 

    ctx = canvas.getContext('2d'); 

    ctx.canvas.width = $('#graph').width(); // resize to parent width 

    ctx.canvas.height = $('#graph').height(); // resize to parent height 

    var x = canvas.width/2; 
    var y = canvas.height/2; 
    ctx.font = '10pt Verdana'; 
    ctx.textAlign = 'center'; 
    ctx.fillText('This text is centered on the canvas', x, y); 
};` 

.update（）

在您的Chart實例上調用update（）將重新呈現包含任何更新值的圖表，允許您編輯多個現有點的值，然後在一個動畫渲染循環中渲染這些值。

另請參考：

How to clear a chart from a canvas so that hover events cannot be triggered?

chart.js load totally new data