Comment faire pour effacer un graphique à partir d'une toile de sorte que planent les événements ne peuvent pas être déclenchée?

Je suis en utilisant Chartjs pour afficher un Graphique en Ligne et cela fonctionne très bien:

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

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

Mais le problème survient lorsque j'essaie de modifier les données du Graphique. - Je mettre à jour le graphique par la création d'une nouvelle instance d'un Graphique avec les nouveaux points de données, et donc à la réinitialisation de la toile.

Cela fonctionne bien. Cependant, quand j'ai passez la souris sur la nouvelle carte, si j'arrive à aller sur des emplacements spécifiques correspondant à des points affichés sur l'ancien tableau, le hover/étiquette est toujours déclenchée et, soudain, le vieil graphique est visible. Il reste visible pendant que ma souris est à cet emplacement et disparaît lorsque déplacer ce point. Je ne veux pas que l'ancien tableau d'affichage. Je veux l'enlever complètement.

J'ai essayé d'effacer à la fois la toile et le graphique existant avant le chargement de la nouvelle. Comme:

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

et

chart.clear();

Mais aucun d'entre eux ont travaillé jusqu'à présent. Des idées sur comment je peux empêcher cela?

  • Mec, c'est exactement le problème que je vais avoir. "Destroy()" méthode ne fonctionne pas et c'est de pisser me off.
  • Pourrais-je vous demander comment vous allez accéder à l'objet graphique? Je vais avoir le même problème, j'ai créer un graphique, puis sur la manipulation d'un clic sur un bouton j'ai besoin de le détruire, mais il est dans une tout autre fonction et je ne peux pas trouver un moyen d'accéder à l'objet graphique à travers la toile ou le contexte des objets.
  • Il y a un bug ouvert pour cette question, voir ici. github.com/jtblin/angular-chart.js/issues/187
  • Eu ce problème. Solution pour créer/recréer stackoverflow.com/a/51882403/1181367
InformationsquelleAutor Adam Jones | 2014-07-18
  1. 113

    J'ai eu d'énormes problèmes avec cette

    J'ai d'abord essayé .clear() ensuite, j'ai essayé .destroy() et j'ai essayé de configurer mon tableau de référence à la valeur null

    Ce qui a finalement résolu le problème pour moi: la suppression de la <canvas> élément et ensuite reappending une nouvelle <canvas> au conteneur parent

    Mon code spécifique (évidemment il y a un million de façons de le faire):

    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);
};
    • Cela fonctionne tout simplement génial
    • Fonctionne très bien monsieur!!!
    • Travaillé comme un champion. Si quelqu'un sait si Chart.js la version 2 corrige ce, le poster ici. Je me demande si les détruire est cassé ou si nous l'utilisons de manière incorrecte.
    • détruire travaillé! stackoverflow.com/a/24854333/212661
    • Nice! Merci! J'ai juste ajouté $('#résultats-graphe").remove(); $('#graphique-container").append('<canvas id="résultats-graphique"><canvas>'); avant la création de graphique.
    • .destroy() devrait fonctionner correctement. Si elle n'a pas, après l'appel .destroy() pour dessiner la nouvelle carte, utiliser setTimeout()
    • Celui-ci fonctionne pour moi.. Merci man

    InformationsquelleAutor neaumusic
  2. 31

    Que j'ai rencontré le même problème il ya quelques heures.

    L' ".clear()" méthode réellement efface la toile, mais (évidemment), il part de l'objet vivant et réactif.

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

    "L'utiliser pour détruire tout graphique instances créées. Ce sera
    nettoyer toutes les références stockées à l'objet graphique à l'intérieur de Chart.js,
    tout comme les écouteurs d'événement attaché par Chart.js."

    Qu'il fait réellement ce qu'il prétend et il a travaillé très bien pour moi, je vous suggère de faire un essai.

    • Pourriez-vous montrer un exemple? J'ai essayé d'utiliser le blocage de plusieurs fois et ça ne fonctionne jamais. Je reçois toujours une erreur que la méthode n'existe pas.
    • (<ChartInstance> ce.le graphique).destroy();
    • C'est le droit anszwer. Pour de futures références, voir: stackoverflow.com/questions/40056555/...
    • .destory() a travaillé très fine
    InformationsquelleAutor Roberto Pierpaoli
  3. 24
    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 meilleure alternative
    • Bon. Merci
    InformationsquelleAutor xchiltonx
  4. 9

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

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

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

    J'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 = '&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);

    Il fonctionne parfaitement pour moi... j'espère que Cela aide.

    InformationsquelleAutor Javier Muñoz
  6. 4

    Cela a fonctionné très bien pour moi

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

    Utilisation .détruire cela pour détruire tout graphique instances créées. Cela permettra de nettoyer toutes les références stockées à l'objet graphique à l'intérieur de Chart.js, tout comme les écouteurs d'événement attaché par Chart.js. Ce doit être appelée avant que la toile est réutilisé pour un nouveau graphique.

    • Cette façon de travailler correctement pour moi, il détruire le placez les rappels. Les réservoirs de soo beaucoup !!
    InformationsquelleAutor Nicholas Macharia
  7. 3

    Nous pouvons mettre à jour le tableau de données dans Chart.js V2.0 comme suit:

    var myChart = new Chart(ctx, data);
myChart.config.data = new_data;
myChart.update();
    • Je suis d'accord avec ce que être une bien meilleure solution est de Détruire sauvagement trop radical, quand tout ce que nous voulons vraiment c'est juste un redémarrage de la "data".
    InformationsquelleAutor Sam G
  8. 1

    À l'aide de CanvasJS, cela fonctionne pour moi compensation graphique et tout le reste, peut travailler pour vous aussi, de vous accorder l'ensemble de votre toile/tableau entièrement avant chaque traitement ailleurs:

    var myDiv= document.getElementById("my_chart_container{0}";
myDiv.innerHTML = "";
    • pour moi, non des méthodes ci-dessus ont travaillé. Cela a fonctionné parfaitement. Merci beaucoup.
    InformationsquelleAutor aggaton
  9. 1

    Je ne pouvais pas obtenir .destroy() pour travailler donc c'est ce que je fais. Le chart_parent div est là où j'ai envie de la toile vers le haut. J'ai besoin de la toile pour redimensionner à chaque fois, donc cette réponse est une extension de l'-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>');
    InformationsquelleAutor Chris
  10. 1

    Lorsque vous créez un nouveau chart.js toile, cela génère un nouveau iframe caché, vous devez supprimer la toile, les ans les iframes. 

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

    InformationsquelleAutor zebus3d
  11. 0

    Pour moi cela a fonctionné:

    JS:

    		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";

    InformationsquelleAutor Scrapie
  12. 0

    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 création de graphique Chart.js écrit aussi ._meta propriété dataset variable:

    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 faut pas supprimer cette propriété sur destroy().

    Si vous utilisez votre ancien objet dataset sans enlever ._meta property, Chart.js va ajouter un nouveau dataset pour ._meta sans suppression des données précédentes. Ainsi, lors de chaque graphique de la ré-initialisation de votre objet dataset s'accumule toutes les données précédentes.

    Afin d'éviter cela, détruire un objet dataset après l'appel de Chart.destroy().

    InformationsquelleAutor Andrew Hudik
  13. 0

    Cela a fonctionné pour moi.
    Ajoutez un appel à clearChart, en haut de votre updateChart() 

    `function clearChart() {
    event.preventDefault();
    var parent = document.getElementById('parent-canvas');
    var child = document.getElementById('myChart');          
    parent.removeChild(child);            
    parent.innerHTML ='<canvas id="myChart" width="350" height="99" ></canvas>';             
    return;
}`
    InformationsquelleAutor Jay
  14. 0

    Depuis détruire genre de détruit "tout", un simple et bon marché de solution quand tout ce que vous voulez vraiment est juste "réinitialiser les données". La réinitialisation de votre jeux de données à un tableau vide fonctionnera parfaitement bien ainsi. Donc, si vous avez un dataset avec des étiquettes, et un axe de chaque côté:

    window.myLine2.data.labels = [];
window.myLine2.data.datasets[0].data = [];
window.myLine2.data.datasets[1].data = [];

    Après cela, vous pouvez simplement appeler:

    window.myLine2.data.labels.push(x);
window.myLine2.data.datasets[0].data.push(y);

    ou, selon si vous utilisez un 2d dataset:

    window.myLine2.data.datasets[0].data.push({ x: x, y: y});

    Il va être beaucoup plus léger que de détruire complètement toute votre graphique/dataset, et la reconstruction de tout.

    InformationsquelleAutor T.S