web-dev-qa-db-fra.com

Comment pousser dynamiquement des jeux de données pour chart.js (graphique à barres)?

J'utilise chartjs (graphique à barres) pour afficher certaines données. Im essayant d'ajouter dynamiquement des données à ensembles de données tableau mais cela ne fonctionne pas.

par exemple, supposons que j'ai 2 objets dans le tableau des ensembles de données, et que je crée dynamiquement cet objet et que j'essaye de le pousser dans les ensembles de données (depuis Chrome console) après que la page a été chargée et que le graphique est déjà en place.

var e = {
                fillColor : "#efefef",
                strokeColor : "#efefef",
                highlightFill: "#efefef",
                highlightStroke: "#efefef",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            }

puis

barChartData.datasets.Push(e)

J'ai aussi essayé de faire window.myBar.update() mais encore une fois rien ne s'est passé.

Connaissez-vous ce problème? Merci,

javascriptchart.js
12
Liel Feldman

Je ne pense pas que vous pouvez utiliser addData pour ajouter une série - c'est pour ajouter des points/barres aux séries existantes.

Cependant, vous pouvez insérer votre nouvelle série directement dans l'objet graphique. Avec l'objet graphique et le nouvel ensemble de données comme ça

var ctx = document.getElementById("chart").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data);

var myNewDataset = {
    label: "My Second dataset",
    fillColor: "rgba(187,205,151,0.5)",
    strokeColor: "rgba(187,205,151,0.8)",
    highlightFill: "rgba(187,205,151,0.75)",
    highlightStroke: "rgba(187,205,151,1)",
    data: [48, 40, 19, 86, 27, 90, 28]
}

le code pour insérer un nouvel ensemble de données serait

var bars = []
myNewDataset.data.forEach(function (value, i) {
    bars.Push(new myBarChart.BarClass({
        value: value,
        label: myBarChart.datasets[0].bars[i].label,
        x: myBarChart.scale.calculateBarX(myBarChart.datasets.length + 1, myBarChart.datasets.length, i),
        y: myBarChart.scale.endPoint,
        width: myBarChart.scale.calculateBarWidth(myBarChart.datasets.length + 1),
        base: myBarChart.scale.endPoint,
        strokeColor: myNewDataset.strokeColor,
        fillColor: myNewDataset.fillColor
    }))
})

myBarChart.datasets.Push({
    bars: bars
})

myBarChart.update();

Fiddle - http://jsfiddle.net/pvak6rkx/ (insère le nouvel ensemble de données après 3 secondes)

11
potatopeelings

Dans la version 2.x, vous pouvez ajouter (ou supprimer) directement des données au graphique, puis appeler update(), par ex.

barChart.data.datasets.Push({
  label: 'label2',
  backgroundColor: '#ff0000',
  data: [1,2,3]
});
barChart.update();

Voici un exemple jsfiddle .

11
Felix Livni