Gráfico de barras Chartjs que muestra datos antiguos al pasar el mouse

Puede darse el caso de que halles algún fallo con tu código o trabajo, recuerda probar siempre en un ambiente de testing antes subir el código al proyecto final.

Solución:

Con el enfoque que está adoptando (por ejemplo, creando un nuevo objeto Gráfico cada vez que cambia el rango de fechas), primero debe destruir el gráfico anterior y luego crear uno nuevo.

Puedes usar el .destroy() método prototipo para hacer esto. Esto es exactamente lo que dice la API.

Use 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 los detectores de eventos asociados adjuntos por Chart.js. Esto debe llamarse antes de que el lienzo se reutilice para un nuevo gráfico.

Por lo tanto, su código se vería así (observe que destruimos y volvemos a crear).

// define a variable to store the chart instance (this must be outside of your function)
var myChart;

function loadFTPRChart(startdate, enddate) 
  var BCData = 
    labels: [],
    datasets: [
      label: "Pass %",
      backgroundColor: "#536A7F",
      data: [],
      stack: 1
    , 
      label: "Fail %",
      backgroundColor: "#e6e6e6",
      data: [],
      stack: 1
    , 
      label: "Auto %",
      backgroundColor: "#286090",
      data: [],
      stack: 2
    , 
      label: "Manual %",
      backgroundColor: "#f0f0f0",
      data: [],
      stack: 2
    ]
  ;

  $.getJSON("content/FTPR_AM_Graph_ajax.php", 
      startdate: startdate,
      enddate: enddate,
      location: "M"
    )
    .done(function(data) 
      console.log("data", data);
      $.each(data.aaData, function(key, val) 
        if (val == "") 
          return true
        
        BCData.labels.push("Coater " + val[0]);
        BCData.datasets[0].data.push(parseFloat(val[2]));
        BCData.datasets[1].data.push(parseFloat(100 - val[2]));
        BCData.datasets[2].data.push(parseFloat(val[1]));
        BCData.datasets[3].data.push(parseFloat(100 - val[1]));
      );

      var option = 
        responsive: true,
      ;
      console.log("BCData", BCData);

      // if the chart is not undefined (e.g. it has been created)
      // then destory the old one so we can create a new one later
      if (myChart) 
        myChart.destroy();
      

      var ctx = document.getElementById("mybarChart2").getContext("2d");
      myChart = new Chart(ctx, 
        type: 'groupableBar',
        data: BCData,
        options: 
          scales: 
            yAxes: [
              ticks: 
                max: 100,
              ,
              stacked: true,
            ]
          
        
      );
    );

Dicho esto, es costoso destruir/crear una y otra vez y, de hecho, ni siquiera es necesario. Hay otro método prototipo llamado .update() que puede usar para volver a representar el gráfico si ha cambiado los datos subyacentes o los objetos de etiqueta.

Aquí hay un jsfiddle que muestra un ejemplo de cómo cambiar los datos y las etiquetas subyacentes y luego volver a representar el gráfico. Le recomiendo encarecidamente que tome este enfoque en su lugar.

Así es como se vería su código con este mejor enfoque.

// define a variable to store the chart instance (this must be outside of your function)
var myChart;

function loadFTPRChart(startdate, enddate) 
  var BCData = 
    labels: [],
    datasets: [
      label: "Pass %",
      backgroundColor: "#536A7F",
      data: [],
      stack: 1
    , 
      label: "Fail %",
      backgroundColor: "#e6e6e6",
      data: [],
      stack: 1
    , 
      label: "Auto %",
      backgroundColor: "#286090",
      data: [],
      stack: 2
    , 
      label: "Manual %",
      backgroundColor: "#f0f0f0",
      data: [],
      stack: 2
    ]
  ;

  $.getJSON("content/FTPR_AM_Graph_ajax.php", 
      startdate: startdate,
      enddate: enddate,
      location: "M"
    )
    .done(function(data) 
      console.log("data", data);
      $.each(data.aaData, function(key, val) 
        if (val == "") 
          return true
        
        BCData.labels.push("Coater " + val[0]);
        BCData.datasets[0].data.push(parseFloat(val[2]));
        BCData.datasets[1].data.push(parseFloat(100 - val[2]));
        BCData.datasets[2].data.push(parseFloat(val[1]));
        BCData.datasets[3].data.push(parseFloat(100 - val[1]));
      );

      var option = 
        responsive: true,
      ;
      console.log("BCData", BCData);

      // if the chart is not undefined (e.g. it has been created)
      // then just update the underlying labels and data for each
      // dataset and re-render the chart
      if (myChart) 
        myChart.data.labels = BCData.labels;
        myChart.data.datasets[0].data = BCData.datasets[0].data;
        myChart.data.datasets[1].data = BCData.datasets[1].data;
        myChart.data.datasets[2].data = BCData.datasets[2].data;
        myChart.data.datasets[3].data = BCData.datasets[3].data;
        myChart.update();
       else 
        // otherwise, this is the first time we are loading so create the chart
        var ctx = document.getElementById("mybarChart2").getContext("2d");
        myChart = new Chart(ctx, 
          type: 'groupableBar',
          data: BCData,
          options: 
            scales: 
              yAxes: [
                ticks: 
                  max: 100,
                ,
                stacked: true,
              ]
            
          
        );
      
    );

Este es el truco de chartjs que encontré

var ctxLine = document.getElementById("line-chart").getContext("2d");
if(window.bar != undefined) 
window.bar.destroy(); 
window.bar = new Chart(ctxLine, );

Solved : hovering over Chartjs Bar Chart showing old data

Esto te ayudará…

comprobar si Mi Gráfico ya tenga configuraciones o no, si existe bórrelo con destruir(); método, y vincule la nueva configuración al lienzo.

Código de muestra..

if (window.MyChart != undefined)

    window.MyChart.destroy();

window.MyChart = new Chart(ctx, MyChartconfig);

Recuerda que puedes compartir este escrito si lograste el éxito.

---

---

Utiliza Nuestro Buscador