0

Tengo un problema cuando intento recargar nuevamente el gráfico en canvas con ChartJs. Al momento de realizar una nueva busqueda me queda los datos de la anterior grafico al pasar el mouse por la grafica. Me gustaria saber como reiniciar el grafico

La funcion que carga la grafica

  function cargar_datos(datasL,dataP,dataR){
  var ctx = $("#myChart")
  var chart = new Chart(ctx, {
    type: 'line',
    data:
    {
      labels: datasL,
      datasets:
      [{
        label: "Rendimiento",
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: ['rgba(255,200,200,0)'],
        borderWidth: 2,
        pointBackgroundColor: "red",
        pointBorderColor: "rgba(250,10,10,0.1)",
        pointBorderWidth: "10",
        pointStyle: "rectRounded",
        data:dataP,
        },
        {
        label: "Aplicado",
        borderColor: 'rgb(0, 143, 255)',
        backgroundColor: ['rgba(112, 171, 219, 0.2)'],
        borderWidth: 2,
        pointBackgroundColor: "blue",
        pointBorderColor: "rgba(144, 140, 174, 0.3)",
        pointBorderWidth: "10",
        pointStyle: "rectRounded",
        data: dataR
      }]
    },
    options: {
        tooltips: {
                 position: 'average',
                mode: 'index',
                intersect: false,
          },
  }
  });
  chart.destroy();
}

Como llamo la funcion desde el Js

 $(document).on('click','#Mostrarb',function(){
    cargar_datos(labels,rend,porc);
});

El html del canvas

<div class="box-body">
      <canvas id="myChart" width="200" height="35"></canvas>
 </div>
3
  • Ya probaste con chart.update();?
    – alanfcm
    el 29 oct. 2018 a las 21:00
  • Si ya lo use es función el 29 oct. 2018 a las 21:04
  • no se puede usar esto ya que no hay como quitarle una data que trae y actualizarlo .. ami pasa el mismo problema pero es porque yo tengo un filtro que hace q el grafico se actualize pero se actualiza todo pero cuando paso el maouse se reinicia y me aparece la data cargada al principio el 17 may. 2019 a las 0:36

1 respuesta 1

2

Ponemos una variable global que albergará el gráfico,Y cada vez que la vayamos a actualizar, hacemos la comprobación de si existe la variable en donde le asignamos la grafico.

var ctx = document.getElementById('canvas').getContext('2d');
if (window.grafica) {
    window.grafica.clear();
    window.grafica.destroy();
}
window.grafica = new Chart(ctx, {/* Opciones aquí */});
1
  • Gracias, despues de dar tantas vueltas con el mismo problema, esto me funciono el 7 jun. 2019 a las 22:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.