Dygraph 動態更新圖例值消失

Question

我正在使用 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"事件，以便值回來，但可能有一種更g.updateOptions()方法。

謝謝。

Answer 1

我找到了解決我的問題的方法，但我不確定它的實施情況。 我在這里分享它，以便其他人可能會找到它：

 $(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()可能會很好，因為更新后圖例值消失似乎很奇怪。

Dygraph 動態更新圖例值消失

問題描述

1 個解決方案

解決方案1
3 2016-08-06 10:14:35

Dygraph 動態更新圖例值消失

問題描述

1 個解決方案

解決方案1 3 2016-08-06 10:14:35

解決方案1
3 2016-08-06 10:14:35