Bon alors j'ai le code suivant:
var element = document.getElementById(scope.changeid);
function getData(division,redraw) {
var employeeData = [];
if (!division) {
$http.get(api.getUrl('competenceUserAverageByMyDivisions', null)).success(function (response) {
processData(response,redraw);
});
}
else {
$http.get(api.getUrl('competenceUserAverageByDivision', division)).success(function (response) {
processData(response,redraw);
})
}
}
function processData(data,redraw) {
var y = [],
x1 = [],
x2 = [];
data.forEach(function (item) {
y.Push(item.user.profile.firstname);
x1.Push(item.current_level);
x2.Push(item.expected);
});
var charData = [{
x: x1,
y: y,
type: 'bar',
orientation: 'h',
name: 'Nuværende'
}, {
x: x2,
y: y,
type: 'bar',
orientation: 'h',
name: 'Forventet'
}],
layout = {
barmode: 'stack',
legend: {
traceorder: 'reversed',
orientation: 'h'
}
};
if(!redraw){
Plotly.plot(element, charData, layout);
}
else
{
Plotly.redraw(element,charData,layout);
}
}
scope.$watch('divisionId', function (newValue, oldValue) {
if (newValue) {
getData(newValue.id,true);
}
}, true);
getData(null,false);
Ce qui crée le graphique suivant:
Maintenant, comme vous pouvez le voir, j'ai ajouté une watcher
scope.$watch('divisionId', function (newValue, oldValue) {
if (newValue) {
getData(newValue.id,true);
}
}, true);
Maintenant, quand je déclenche cela, il devrait mettre à jour le tableau et appeler Plotly.redraw(element,charData,layout);
Cependant, lorsque cela se produit, le graphique ne change pas du tout. Il n'y a pas d'erreur dans la console, donc je ne sais pas trop quoi faire?
J'ai trouvé la réponse à la question.
J'avais besoin d'utiliser:
Plotly.newPlot(element,charData,layout);
au lieu de redraw
Plotly.redraw(Gd)
est la bonne façon.
Mais vous appelez Plotly.redraw
incorrectement.
La méthode correcte consiste à mettre à jour l'objet data
au lieu de créer un nouvel objet data
.
var data = [ {
x: ['VALUE 1'], // in reality I have more values...
y: [20],
type: 'bar'
}
];
Plotly.newPlot('PlotlyTest', data); function adjustValue1(value) {
data[0]['y'][0] = value;
Plotly.redraw('PlotlyTest');
}
Selon un modérateur de la communauté Plotly (voir la première réponse ici ), Plotly.restyle
est plus rapide que Plotly.redraw
et Plotly.newPlot
.
Exemple tiré du lien:
var data = [{
x: ['VALUE 1'], // in reality I have more values...
y: [20],
type: 'bar'
}];
Plotly.newPlot('PlotlyTest', data);
function adjustValue1(value)
{
Plotly.restyle('PlotlyTest', 'y', [[value]]);
}
La fonction extendTraces devrait être ce que vous recherchez. Il peut ajouter des points de données à votre graphique et le redessiner. Contrairement à redessiner (@ Honghe.Wu Answer), il n’est pas nécessaire de mettre à jour la référence lors de l’utilisation de extendTraces.
[extendTraces] Cette fonction a des performances comparables à Plotly.react et est plus rapide que de redessiner tout le tracé avec Plotly.newPlot.
https://plot.ly/javascript/plotlyjs-function-reference/#plotlyextendtrtraces
Exemple d'utilisation
// initialise some data beforehand
var y = [];
for (var i = 0; i < 20; i ++) {
y[i] = Math.random();
}
var trace = {
// x: x,
y: y,
type: 'bar',
};
var data = [trace];
// create the plotly graph
Plotly.newPlot('graph', data);
setInterval(function() {
// add data to the trace via function call
Plotly.extendTraces('graph', { y: [[getData()]] }, [0]);
// y.Push(getData()); Plotly.redraw('graph'); //similar effect
}, 400);
function getData() {
return Math.random();
}