Graphique à barres Chartjs montrant les anciennes données en vol stationnaire
J’ai un graphique à barres créé à l’aide de chart.js. Tout fonctionne correctement lors du chargement de la page, mais lorsque je modifie la période à l’aide d’un sélecteur de distance, un problème apparaît. Les nouvelles données sont imscopes, mais lorsque je survole celles-ci, les anciennes données sont affichées. Je suis nouveau sur javascript, donc j’espère avoir de l’aide. Il semble que j’ai besoin d’incorporer .destroy (); en quelque sorte, mais je ne sais pas comment. Un extrait de mon code est ci-dessous:
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); //console.log("PrevData", data); var ctx = document.getElementById("mybarChart2").getContext("2d"); new Chart(ctx, { type: 'groupableBar', data: BCData, options: { scales: { yAxes: [{ ticks: { max: 100, }, stacked: true, }] } } }); }); } loadFTPRChart($('#reportrange').data().daterangepicker.startDate.format('MM/DD/YYYY'), $('#reportrange').data().daterangepicker.endDate.format('MM/DD/YYYY')); Quel est le meilleur moyen de détruire les données d’origine afin que, lorsque je change de plage de dates et que je survole le nouveau graphique, les anciennes données ne clignotent plus?
Merci
- Chart.js 2.0 Formatage de l’axe Y avec séparateur de devise et de milliers
- Comment append un événement OnClick sur les étiquettes dans Chart.js v2.0?
- Comment afficher les étiquettes de points du jeu de données Line Chart avec Chart.js?
- graphique js tooltip comment contrôler les données qui montrent
- Ajout d’une image à l’intérieur de points Linechart dans ChartJs
- Dans chart.js, est-il possible de masquer le libellé / diagramme d’axe des abscisses en cas d’access depuis un mobile?
- Comment désactiver chartjs legendclick
- Le graphique en courbes de ChartJs
- Uncaught TypeError: impossible de lire la propriété ‘offsetWidth’ de undefined – chart.js
- Changer la couleur des valeurs des axes X et Y. Chart.js
Avec l’approche que vous prenez (par exemple, en créant un nouvel object Graphique chaque fois que la plage de dates change), vous devez d’abord détruire le graphique précédent, puis en créer un nouveau.
Vous pouvez utiliser la méthode prototype .destroy() pour cela. Voici exactement ce que dit l’API.
Utilisez cette option pour détruire toutes les instances de graphique créées. Cela nettoiera toutes les références stockées dans l’object graphique dans Chart.js, ainsi que tous les écouteurs d’événements associés attachés par Chart.js. Cela doit être appelé avant que la canvas ne soit réutilisée pour un nouveau graphique.
Par conséquent, votre code ressemblerait à quelque chose comme ceci (notez que nous détruisons et recréons).
// 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 (eg 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, }] } } }); }); }
Cela dit, il est coûteux de détruire / créer encore et encore et ce n’est même pas nécessaire. Il existe une autre méthode prototype appelée .update() que vous pouvez utiliser pour restituer le graphique si vous avez modifié ses données sous-jacentes ou ses objects libellés.
Voici un exemple montrant comment modifier les étiquettes et les données sous-jacentes, puis retransformer le graphique. Je vous recommande fortement de prendre cette approche à la place.
Voici à quoi ressemblerait votre code en adoptant cette meilleure approche.
// 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 (eg 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, }] } } }); } }); }
J’ai trouvé le problème et ma solution est de les supprimer du code HTML en premier et avant de charger un nouveau graphique, puis d’append un canevas.
Html
$('#chart').empty(); $('#chart').html(''); // then load chart. var ctx = document.getElementById("survey_result");
C’est le truc de chartjs que j’ai trouvé
var ctxLine = document.getElementById("line-chart").getContext("2d"); if(window.bar != undefined) window.bar.destroy(); window.bar = new Chart(ctxLine, {});
https://therichpost.com/solved-hovering-chartjs-bar-chart-showing-old-data
Il existe une solution simple pour cela, ce qui peut être fait dans JS lui-même.
Disons que votre HTML a quelque chose comme ci-dessous
Ensuite, dans votre script, vous pouvez append des lignes de code ci-dessous avant de mettre à jour les données.
Cela a résolu mon problème.