Dygraph 动态更新图例值消失答案

【问题标题】：Dygraph dynamic update legend values disappearDygraph 动态更新图例值消失
【发布时间】：2019-11-21 14:43:26
【问题描述】：

我正在使用 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" 事件，这样值就会回来，但可能有更简洁的方法。

谢谢。

【问题讨论】：

标签： javascript dygraphs

【解决方案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() 中可能会很好，因为图例值在更新后消失似乎很奇怪。

【讨论】：

如果我不移动鼠标，即使它在 dygraphs 中动态更新，您是否也知道如何保持图例显示相同的值？