Ответ 1
Я нашел ответ на вопрос.
По-видимому, мне нужно было использовать:
Plotly.newPlot(element,charData,layout);
вместо redraw
Итак, у меня есть следующий код:
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);
Что создает следующую диаграмму:
Теперь, когда вы видите, что я добавил watcher
scope.$watch('divisionId', function (newValue, oldValue) {
if (newValue) {
getData(newValue.id,true);
}
}, true);
Теперь, когда я запускаю это, он должен обновить график и вызвать Plotly.redraw(element,charData,layout);
Однако, когда это происходит, диаграмма не меняется вообще. В консоли нет ошибок, поэтому я не совсем уверен, что делать?
Я нашел ответ на вопрос.
По-видимому, мне нужно было использовать:
Plotly.newPlot(element,charData,layout);
вместо redraw
Plotly.redraw(gd)
- правильный путь.
Но вы неправильно вызываете Plotly.redraw
.
Правильный путь - это обновление объекта data
вместо нового объекта 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');
}
По словам модератора сообщества Plotly (см. Первый ответ здесь), Plotly.restyle
работает быстрее, чем Plotly.redraw
и Plotly.newPlot
.
Пример взят по ссылке:
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]]);
}
Функция exteTraces должна быть именно тем, к чему вы стремитесь. Он может добавить точки данных на ваш график и перерисовать его. В отличие от перерисовки (@Honghe.Wu Ответ), вам не нужно обновлять ссылку при использовании exteTraces.
[exteTraces] Эта функция имеет сопоставимую производительность с Plotly.react и работает быстрее, чем перерисовка всего графика с помощью Plotly.newPlot.
https://plot.ly/javascript/plotlyjs-function-reference/#plotlyextendtraces
Пример использования
// 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();
}
Кто-нибудь может сказать, как использовать эту функцию exteTraces в Angular 2+ обертке (https://github.com/plotly/angular-plotly.js) для plotly.js? Я не могу понять это из документов, приведенных в URL.