Frage Wie lösche ich ein Diagramm aus einem Canvas, so dass Hover-Ereignisse nicht ausgelöst werden können?


Ich verwende Chartjs, um ein Liniendiagramm anzuzeigen, und das funktioniert einwandfrei:

// get line chart canvas
var targetCanvas = document.getElementById('chartCanvas').getContext('2d');

// draw line chart
var chart = new Chart(targetCanvas).Line(chartData);

Das Problem tritt jedoch auf, wenn ich versuche, die Daten für das Diagramm zu ändern. Ich aktualisiere das Diagramm, indem ich eine neue Instanz eines Diagramms mit den neuen Datenpunkten erstelle und damit die Arbeitsfläche neu initialisiere.

Das funktioniert gut. Wenn ich jedoch über das neue Diagramm blättern werde, wenn ich zufällig bestimmte Orte durchfahre, die den auf dem alten Diagramm angezeigten Punkten entsprechen, wird der Hover / Label weiterhin ausgelöst und plötzlich ist das alte Diagramm sichtbar. Es bleibt sichtbar, während sich meine Maus an diesem Ort befindet und verschwindet, wenn ich von diesem Punkt weg gehe. Ich möchte nicht, dass das alte Diagramm angezeigt wird. Ich möchte es vollständig entfernen.

Ich habe versucht, sowohl den Canvas als auch den vorhandenen Chart zu löschen, bevor ich den neuen geladen habe. Mögen:

targetCanvas.clearRect(0,0, targetCanvas.canvas.width, targetCanvas.canvas.height);

und

chart.clear();

Aber keines davon hat bisher funktioniert. Irgendwelche Ideen, wie ich das verhindern kann?


76
2017-07-18 01:02


Ursprung


Antworten:


Ich hatte große Probleme damit

Zuerst habe ich es versucht .clear() dann habe ich es versucht .destroy() und ich habe versucht, meine Diagrammreferenz auf null zu setzen

Was hat das Problem endgültig für mich gelöst: Löschen der <canvas> Element und dann erneut ein neues <canvas> zum übergeordneten Container


Mein spezifischer Code (offensichtlich gibt es eine Million Möglichkeiten, dies zu tun):

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);
};

89
2017-07-31 16:15



Ich habe vor ein paar Stunden dasselbe Problem erlebt.

Die ".clear ()" - Methode löscht tatsächlich die Leinwand, aber (offensichtlich) lässt sie das Objekt lebendig und reaktiv.

Sorgfältig lesen die offizielle DokumentationIm Abschnitt "Erweiterte Verwendung" habe ich die Methode ".destroy ()" bemerkt, die wie folgt beschrieben wird:

"Verwenden Sie dies, um alle erstellten Diagramminstanzen zu zerstören   Bereinigen Sie alle Referenzen, die im Chart-Objekt in Chart.js gespeichert sind.   zusammen mit allen zugehörigen Ereignis-Listenern, die von Chart.js angehängt wurden. "

Es tut tatsächlich, was es behauptet, und es hat gut für mich gearbeitet, ich schlage vor, Sie es zu versuchen.


29
2017-07-20 19:56



var myPieChart=null;

function drawChart(objChart,data){
    if(myPieChart!=null){
        myPieChart.destroy();
    }
    // Get the context of the canvas element we want to select
    var ctx = objChart.getContext("2d");
    myPieChart = new Chart(ctx).Pie(data, {animateScale: true});
}

19
2018-05-26 20:58



Das ist das Einzige, was für mich funktioniert hat:

document.getElementById("chartContainer").innerHTML = '&nbsp;';
document.getElementById("chartContainer").innerHTML = '<canvas id="myCanvas"></canvas>';
var ctx = document.getElementById("myCanvas").getContext("2d");

8
2017-08-14 18:50



Ich hatte das gleiche Problem hier ... Ich versuchte, die Methode destroy () und clear () zu verwenden, aber ohne Erfolg.

Ich habe es auf die nächste Art gelöst:

HTML:

<div id="pieChartContent">
    <canvas id="pieChart" width="300" height="300"></canvas>
</div>

Javascript:

var pieChartContent = document.getElementById('pieChartContent');
pieChartContent.innerHTML = '&nbsp;';
$('#pieChartContent').append('<canvas id="pieChart" width="300" height="300"><canvas>');

ctx = $("#pieChart").get(0).getContext("2d");        
var myPieChart = new Chart(ctx).Pie(data, options);

Es funktioniert perfekt für mich ... Ich hoffe, dass es hilft.


4
2017-08-12 07:29



Das hat sehr gut für mich funktioniert

    var ctx = $("#mycanvas");
     var LineGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata});
        LineGraph.destroy();

Benutzen .zerstören Dadurch werden alle erstellten Diagramminstanzen gelöscht. Dadurch werden alle Referenzen gelöscht, die im Chart-Objekt in Chart.js gespeichert wurden, zusammen mit allen zugehörigen Ereignis-Listenern, die von Chart.js angehängt wurden. Dies muss aufgerufen werden, bevor die Arbeitsfläche für ein neues Diagramm wiederverwendet wird.


4
2017-08-04 06:56



Wenn ich CanvasJS verwende, funktioniert dies für mich, wenn ich das Diagramm lösche und alles andere, könnte auch für dich funktionieren und dir erlauben, dein Canvas / Diagramm vor jeder anderen Verarbeitung vollständig einzurichten:

var myDiv= document.getElementById("my_chart_container{0}";
myDiv.innerHTML = "";

1
2017-08-20 03:45



Ich konnte nicht .destroy () zu arbeiten, also ist das was ich mache. Das chart_parent-div ist die Stelle, an der die Leinwand angezeigt werden soll. Ich brauche die Leinwand, um die Größe jedes Mal zu ändern, also ist diese Antwort eine Erweiterung des obigen.

HTML:

<div class="main_section" > <div id="chart_parent"></div> <div id="legend"></div> </div>

JQuery:

  $('#chart').remove(); // this is my <canvas> element
  $('#chart_parent').append('<label for = "chart">Total<br /><canvas class="chart" id="chart" width='+$('#chart_parent').width()+'><canvas></label>');

1
2017-11-18 07:36



Wenn Sie einen neuen chart.js-Canvas erstellen, wird dadurch ein neuer iframe ausgeblendet. Sie müssen den Canvas- und den alten iframes löschen.

$('#canvasChart').remove(); 
$('iframe.chartjs-hidden-iframe').remove(); 
$('#graph-container').append('<canvas id="canvasChart"><canvas>'); 
var ctx = document.getElementById("canvasChart"); 
var myChart = new Chart(ctx, { blablabla });

Referenz: https://github.com/zebus3d/javascript/blob/master/chartJS_filtering_with_checkboxs.html


1
2018-06-10 20:43