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
Now as you can see ive added a watcher
scope.$watch('divisionId', function (newValue, oldValue) {
if (newValue) {
getData(newValue.id,true);
}
}, true);
现在当我触发它时,它应该更新图表并调用 Plotly.redraw(element,charData,layout);
Now when i trigger this it should update the chart and call Plotly.redraw(element,charData,layout);
但是,当它这样做时,图表根本不会改变.控制台没有错误,所以我不太确定该怎么办?
However when it does this the chart does not change at all. There is no error in the console so i am not quite sure what to do?
推荐答案
我找到了问题的答案.
显然我需要使用:
Plotly.newPlot(element,charData,layout);
而不是重绘
这篇关于绘制更新数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:绘制更新数据
基础教程推荐
猜你喜欢
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01