情节更新数据
Plotly update data
好的,我有以下代码:
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');
}
extendTraces 函数应该是您想要的。它可以将数据点添加到您的图形并重新绘制它。相对于重绘(@Honghe.Wu Answer),使用extendTraces时不需要更新引用
[extendTraces] This function has comparable performance to Plotly.react and is faster than redrawing the whole plot with 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();
}
根据 Plotly 社区管理员的说法(参见第一个答案 here),Plotly.restyle
比 Plotly.redraw
和 Plotly.newPlot
快。
示例取自 link:
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]]);
}
好的,我有以下代码:
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');
}
extendTraces 函数应该是您想要的。它可以将数据点添加到您的图形并重新绘制它。相对于重绘(@Honghe.Wu Answer),使用extendTraces时不需要更新引用
[extendTraces] This function has comparable performance to Plotly.react and is faster than redrawing the whole plot with 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();
}
根据 Plotly 社区管理员的说法(参见第一个答案 here),Plotly.restyle
比 Plotly.redraw
和 Plotly.newPlot
快。
示例取自 link:
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]]);
}