web-dev-qa-db-fra.com

Chart.js: Modification dynamique du type de graphique (ligne à barre comme exemple)

J'essaie d'échanger à chaud les types de graphique en fonction des modifications apportées à la zone de sélection. Si les données doivent être mises à jour, cela change.

Ainsi, par exemple, lors du chargement de la page, je crée un graphique comme celui-ci:

var config = {
     type: 'line',
     data: {
        labels: this.labels,
        datasets: [{
            label: 'Some Label',
            data: this.values
        }]
     },
     options: {
         responsive: true
     }
}
var context = document.getElementById('canvas').getContext('2d');
window.mychart = new Chart(context, config);

Mais ensuite, je change la liste déroulante en un graphique à barres. J'ai testé les données avec un graphique à barres au chargement de la page, et cela a très bien fonctionné.

Voici comment j'essaie de changer le graphique.

window.mychart.destroy();

// chartType = 'bar'
config.type = chartType;

var context = document.getElementById('canvas').getContext('2d');
window.mychart = new Chart(context, config);

window.mychart.update();
window.mychart.render();

Mais rien ne se passe. Le graphique en courbes reste. Comment changer dynamiquement le type de graphique? (Même si cela signifie détruire et recréer le canevas du graphique).

METTRE À JOUR 

Notez qu'il semble détruire le graphique, mais continue à redessiner un graphique linéaire, même si je fais console.log(config.type); et qu'il renvoie bar, pas line

chart.jsvue.js
8
Nathan

Le correctif

  • Détruire l'ancien graphique (pour supprimer les écouteurs d'événement et effacer le canevas)
  • Faire une copie en profondeur de l'objet config
  • Changer le type de la copie
  • Passez la copie à la place de l'objet d'origine.

Voici un exemple de travail avec jsfiddle

Exemple de vue d'ensemble:

var temp = jQuery.extend(true, {}, config);
temp.type = 'bar'; // The new chart type
myChart = new Chart(ctx, temp);

Remarque: à l'aide de la version 2.0.1 de Chart.js

Pourquoi ça marche

Chart.js modifie l'objet de configuration que vous transmettez. De ce fait, vous ne pouvez pas changer simplement 'config.type'. Vous pouvez aller dans l'objet modifié et tout changer pour le type que vous voulez, mais il est beaucoup plus facile de simplement sauvegarder l'objet config d'origine.

12
L Bahr

Juste pour ajouter que cela est maintenant corrigé dans la v.2.1.3, suivi de https://stackoverflow.com/users/239375/nathan

document.getElementById('changeToLine').onclick = function() {
  myChart.destroy();
  myChart = new Chart(ctx, {
    type: 'line',
    data: chartData
  });
};

Confirmé corrigé dans la dernière version. Consultez http://codepen.io/anon/pen/ezJGPB et appuyez sur le bouton situé sous le graphique pour le changer de barre à graphique linéaire. 

2
Douglas Timms

La solution de rechange peut être aussi simple que de créer les deux graphiques dans des éléments Div séparés. Ensuite, selon votre condition, faites-en une visible et cachez-en une autre dans le javascript. Cela devrait vous permettre de modifier le type de graphique correspondant à vos besoins.

1
Aman Sharma