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


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?


76
2017-07-18 01:02


origen


Respuestas:


Tuve grandes problemas con esto

Primero lo intenté .clear() entonces probé .destroy() y traté de configurar mi referencia de gráfico a nulo

Lo que finalmente resolvió el problema para mí: eliminar el <canvas> elemento y luego volver a colocar un nuevo <canvas> al 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);
};

89
2017-07-31 16:15



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:

"Use esto 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 cualquier oyente de eventos asociado adjunto por Chart.js ".

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


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



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

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



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

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


4
2017-08-12 07:29



Esto funcionó muy bien para mí

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

Utilizar .destruir 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.


4
2017-08-04 06:56



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

1
2017-08-20 03:45



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

1
2017-11-18 07:36



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


1
2018-06-10 20:43



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

1
2018-04-24 12:56