动态更新图例值消失
Dygraph dynamic update legend values disappear
我正在使用dygraph来监视CSV文件并使用动态更新功能。当我将鼠标悬停在图表上以显示图例中曲线的值时,一旦图表更新,它们就会消失,这有点烦人。
<html>
<head>
<script type="text/javascript" src="/static/dygraph-combined.js"></script></head>
<body>
<div id="psu"></div>
<script type="text/javascript">
g = new Dygraph(document.getElementById("psu"), "/data/psu",
{
legend: 'always',
hideOverlayOnMouseOut: false,
ylabel: 'current (A)',
height: 480,
width: 640,
sigFigs: 2,
title: 'power interface monitor',
xValueFormatter: Dygraph.dateString_,
xAxisLabelFormatter: Dygraph.dateString_,
xTicker: Dygraph.dateTicker
} );
window.intervalId = setInterval(function(){g.updateOptions( { 'file': "/data/psu" } ); }, 1000);
</script>
</html>
因此,图表全部正确显示并且数据已更新,只有图例值在使用g.updateOptions()
刷新图形后消失。我在想也许我可以在g.updateOptions()
后重新触发某种"mouseover"
事件,以便值返回,但可能有更干净的方法。
谢谢。
我找到了解决问题的方法,但我不确定它的实施情况如何。我在这里分享它,以便其他人可能会找到它:
$(document).ready(function() {
var data = [];
var t = new Date();
for (var i = 10; i >= 0; i--) {
var x = new Date(t.getTime() - i * 1000);
data.push([x, Math.random()]);
}
var last_mousemove_evt = null;
var on_graph = false;
var g = new Dygraph(document.getElementById("div_g"), data, {
legend: 'always',
drawPoints: true,
showRoller: true,
valueRange: [0.0, 1.2],
labels: ['Time', 'Random'],
highlightCallback: function(e, x, pts, row) {
last_mousemove_evt = e;
on_graph = true
},
unhighlightCallback: function(e) {
on_graph = false;
}
});
// It sucks that these things aren't objects, and we need to store state in window.
window.intervalId = setInterval(function() {
var x = new Date(); // current time
var y = Math.random();
data.push([x, y]);
g.updateOptions({
'file': data
});
if (on_graph) {
g.mouseMove_(last_mousemove_evt);
}
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="div_g" style="width:600px; height:300px;"></div>
所以我最终使用了highlightCallback
和unhighlightCallback
选项,这样我就可以找出鼠标位置,并在动态更新调用后,然后使用 dygraph.mouseMove_()
函数重新绘制图例值。似乎有效。
如果有更好的解决方案,请告诉我。默认情况下,最好在dygraph.updateOptions()
中包含此功能,因为更新后图例值消失似乎很奇怪。
相关文章:
- Javascript循环不会自我更新
- 添加文字和评论功能更新Div
- AngularJS:ng之后,重复$scope值未按预期更新
- 如何通过数组更新角度子范围
- Ajax聊天消息重复而不仅仅是更新
- 通过CSV文件上载更新数据库表
- 平均值:无法将数据更新到数据库
- facebook”;添加评论“;popup获胜'不要消失
- $rootScope未使用forEach进行更新
- d3基于用户选择动态更新节点
- 有条件更新d3.js力图中节点的最佳方法
- Angular:更新一次性绑定的数据
- 在浏览器中更新页面后,动态插入的页面内容将消失
- 要随索引页一起加载的滚动更新,并在 iframe 加载来自链接的内容时消失
- 更新面板后,Facebook共享按钮消失
- 谷歌线图可视化图表消失时更新它
- 更新CKeditor,现在复制/剪切上下文菜单选项消失了.我怎样才能把它们找回来
- 以手提式发行.如果我开始纠正错误单元格或更新新单元格,则单元格高亮显示将消失
- 更新面板外的链接在部分回发后消失
- 动态更新图例值消失