다이 그래프 동적 업데이트 범례 값이 사라짐

다이 그래프를 사용하여 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" 이벤트를 다시 트리거 할 수 있을지도 모른다고 생각했기 때문에 값이 다시 돌아 왔지만 더 깨끗한 방법이있을 수 있습니다.

감사합니다.

출처

2016-07-14 Christoph Larndorfer

내 문제에 대한 해결책을 찾았지만 구현 방법이 확실하지 않습니다. 나는 다른 사람들이 찾을 수 있도록 여기에 공유 :

$(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()에이 기능을 포함하는 것이 좋습니다.

출처

2016-08-06 10:14:35

다이 그래프 동적 업데이트 범례 값이 사라짐

답변

관련 문제