javascript - examples - ¿Cómo borrar un gráfico de un lienzo para que los eventos de desplazamiento no se puedan activar?

js chart min js

Question

Estoy usando Chartjs para mostrar un Line Chart y esto funciona bien:

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

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

Pero el problema ocurre cuando trato de cambiar los datos para el Gráfico. Actualizo el gráfico creando una nueva instancia de un Gráfico con los nuevos puntos de datos y, por lo tanto, reinicio el lienzo.

Esto funciona bien Sin embargo, cuando sobrevivo sobre la nueva tabla, si sucede que repasaré las ubicaciones específicas correspondientes a los puntos que se muestran en la tabla anterior, la posición / etiqueta todavía se activa y de repente aparece la tabla anterior. Permanece visible mientras mi mouse está en esta ubicación y desaparece cuando se mueve desde ese punto. No quiero que se muestre el gráfico anterior. Quiero eliminarlo por completo

Intenté borrar tanto el lienzo como el gráfico existente antes de cargar el nuevo. Me gusta:

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

y

chart.clear();

Pero ninguno de estos ha funcionado hasta ahora. ¿Alguna idea sobre cómo puedo evitar que esto suceda?

Answer 1

Chart.js tiene un error: Chart.controller(instance) registra cualquier gráfico nuevo en una propiedad global Chart.instances[] y lo elimina de esta propiedad en .destroy() .

Pero en la creación del gráfico, Chart.js también escribe la propiedad ._meta en la variable del conjunto de datos:

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

y no elimina esta propiedad en destroy() .

Si utiliza su objeto de conjunto de datos anterior sin eliminar la ._meta property ._meta, Chart.js agregará nuevo conjunto de datos a ._meta sin borrar los datos anteriores. Por lo tanto, en la reinicialización de cada gráfico, el objeto del conjunto de datos acumula todos los datos anteriores.

Para evitar esto, destruya el objeto del conjunto de datos después de llamar a Chart.destroy() .

Answer 2

Cuando crea un nuevo lienzo chart.js, esto genera un nuevo iframe oculto, necesita eliminar el lienzo y los iframes antiguos.

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

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

Answer 3

Esto es lo único que funcionó para mí:

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

Answer 4

He enfrentado el mismo problema hace unas horas.

El método ".clear ()" realmente borra el lienzo, pero (evidentemente) deja el objeto vivo y reactivo.

Leyendo cuidadosamente la documentación oficial , en la sección "Uso avanzado", he notado el método ".destroy ()", que se describe a continuación:

"Úselo para destruir cualquier instancia de gráfico que se cree. Esto limpiará cualquier referencia almacenada en el objeto de gráfico dentro de Chart.js, junto con los detectores de eventos asociados conectados por Chart.js".

De hecho, hace lo que dice y me ha funcionado bien, te sugiero que lo pruebes.

Answer 5

No pude hacer funcionar .destroy () tampoco, así que esto es lo que estoy haciendo. El div chart_parent es donde quiero que aparezca el lienzo. Necesito el lienzo para cambiar el tamaño cada vez, por lo que esta respuesta es una extensión de la anterior.

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

Answer 6

Para mí esto funcionó:

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

Answer 7

Podemos actualizar los datos del gráfico en Chart.js V2.0 de la siguiente manera:

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

Answer 8

Tuve el mismo problema aquí ... Intenté usar el método destroy () y clear (), pero sin éxito.

Lo resolví de la siguiente manera:

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

Funciona perfecto para mí ... Espero que ayude.

Answer 9

Tuve grandes problemas con esto

Primero probé .clear() luego probé .destroy() y traté de establecer mi referencia de gráfico a nulo

Lo que finalmente me solucionó el problema: eliminar el elemento <canvas> y luego volver a colocar un nuevo <canvas> en el contenedor principal

Mi código específico (obviamente hay un millón de formas de hacerlo):

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

Answer 10

Usar CanvasJS, esto funciona para mí y para borrar todo lo demás, también podría funcionar para usted, lo que le permite configurar su lienzo / gráfico completamente antes de cada procesamiento en otro lugar:

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

Answer 11

Esto funcionó muy bien para mí

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

Use .destruye esto para destruir cualquier instancia de gráfico que se cree. Esto limpiará todas las referencias almacenadas en el objeto de gráfico dentro de Chart.js, junto con cualquier detector de eventos asociado adjunto por Chart.js. Esto debe invocarse antes de volver a usar el lienzo para un nuevo gráfico.

Answer 12

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