Comment effacer un diagramme d'une toile de sorte que les événements de vol stationnaire ne peuvent pas être déclenchés?

j'ai fait face au même problème il y a quelques heures.

La ".la méthode clear()" efface en fait la toile, mais (évidemment) elle laisse l'objet vivant et réactif.

en Lisant attentivement la documentation officielle , dans les "utilisation Avancée" de la section, j'ai remarqué que la méthode ".destroy()", décrit comme suit:

" utilisez ceci pour détruire toutes les instances graphiques qui sont créées. Ce sera nettoyer toutes les références stockées à l'objet graphique dans le Diagramme.js, avec tous les écouteurs d'événements associés attachés par Graphique.js."

il fait en fait ce qu'il prétend et il a bien fonctionné pour moi, je vous suggère de lui donner un essai.

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

C'est la seule chose qui a fonctionné pour moi:

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

j'ai eu le même problème ici... J'ai essayé d'utiliser la méthode destroy () et clear (), mais sans succès.

Je l'ai résolu de la manière suivante:

HTML:

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

Javascript:

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

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

ça me va parfaitement... J'espère que Cela aide.

cela a très bien fonctionné pour moi

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

utiliser .détruire ceci pour détruire toutes les instances graphiques qui sont créées. Cela nettoiera toutes les références stockées à l'objet graphique dans la carte.js, ainsi que tous les écouteurs d'événements associés attachés par Graphique.js. Cela doit être appelé avant que la toile soit réutilisée pour une nouvelle carte.

à L'aide de CanvasJS, cela fonctionne pour moi de déblayer la carte et tout le reste, pourrait fonctionner pour vous aussi, vous accordant de mettre votre toile/carte entièrement en place avant chaque traitement ailleurs:

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

Je n'ai pas pu .destroy() pour travailler donc c'est ce que je fais. La div chart_parent est là où je veux que la toile apparaisse. J'ai besoin de la toile pour redimensionner à chaque fois, donc cette réponse est une extension de la ci-dessus.

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

Lorsque vous créez un nouveau graphique.js canvas, cela génère une nouvelle iframe cachée, vous devez supprimer la toile et les iframes olds.

$('#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 });

de référence: https://github.com/zebus3d/javascript/blob/master/chartJS_filtering_with_checkboxs.html

nous pouvons mettre à jour les données de carte dans la carte.js V2.0 comme suit:

var myChart = new Chart(ctx, data);
myChart.config.data = new_data;
myChart.update();

pour moi cela a fonctionné:

		var in_canvas = document.getElementById('chart_holder');
	//remove canvas if present
			while (in_canvas.hasChildNodes()) {
				  in_canvas.removeChild(in_canvas.lastChild);
				} 
	//insert canvas
			var newDiv = document.createElement('canvas');
			in_canvas.appendChild(newDiv);
			newDiv.id = "myChart";

Chart.js a un bug: Chart.controller(instance) enregistre tout nouveau graphique dans une propriété globale Chart.instances[] et le supprime de cette propriété sur .destroy() .

mais à la carte de création de carte.js écrit aussi ._meta propriété de la variable dataset:

var meta = dataset._meta[me.id];
if (!meta) {
   meta = dataset._meta[me.id] = {
       type: null,
       data: [],
       dataset: null,
       controller: null,
       hidden: null,     // See isDatasetVisible() comment
       xAxisID: null,
       yAxisID: null
   };

et il ne supprime pas cette propriété sur destroy() .

si vous utilisez votre ancien objet dataset sans supprimer ._meta property , graphique.js va ajouter de nouvelles données ._meta sans suppression des données précédentes. Ainsi, lors de la ré-initialisation de chaque graphique, votre objet dataset accumule toutes les données précédentes.

pour éviter cela, détruisez l'objet dataset après avoir appelé Chart.destroy() .