juijs / jui-chart

SVG-based JUI chart that can be used in the browser and Node.js. Support many types of charts. (Dashboard, Map, Topology, Full 3D, Realtime)
https://codepen.io/collection/nLydod/
57 stars 25 forks source link

JUI RealTime Chart 에서 값 마우스오버시 툴팁 깜빡거림 문의 #169

Open hyejungk93 opened 6 years ago

hyejungk93 commented 6 years ago

안녕하세요. JUI RealTime Chart 사용 중 궁금한 점이 있어 문의드립니다. JUI RealTIme Chart 에서 해당 그래프의 scatter brush 에 마우스오버시 툴팁이 빠르게 사라졌다 생겼다를 반복하면서 거의 깜빡입니다. *해당 현상은 IE 보다 Chrome에서 발생이 잘됩니다

image

혹시 해결방법은 없는지 문의드립니다.

    jui.ready(["chart.builder"], function (builder) {
        var diskTarget = [];
        //var networkMax = 0;

        // 2초마다 그래프 재생성
        var refreshIntervalID = setInterval(function() {
            setGraphForm();

            // 해당 그래프가 없을 경우 setInterval 종료
            if (document.getElementById(graphId) == null) {
                clearInterval(refreshIntervalID);
            }               
        }, 2000);           

            var cpuMemoryChart = builder ("#cpuMemInfo_" + listNum, {   
            axis: [{
                x: {
                    type: "date",
                    domain: [start, current],
                    realtime: "seconds",
                    interval: 10,
                    format: "hh:mm:ss",
                    line: true,
                    key: "time"
                },
                y: {
                    type: "range",
                    domain: [0, 100],
                    step: 5,
                    line: true,
                    format: function(value) {
                        return value + "%";
                    }
                }
            }],
            brush: [{
                type: "line",
                colors: cpuMemoryColor
            }, {
                type: "scatter",
                target: ["Cpu", "Memory"],
                symbol: "circle",
                clip: true,
                size: 8,
                colors: cpuMemoryColor
            }],
            widget: [{
                type: "legend",
                filter: false
            }, {
                type: "tooltip",
                brush: [1]
            }, {
                type: "title",
                text: "사용량",
                align:"end",
                size: 16
            }],
            style: {
                titleFontWeight: "bold"
            }               
        });

         function setGraphForm() {
             cpuMemoryChart.axis(0).update(cpuMemoryData);              
                   cpuMemoryChart.axis(0).updateGrid("x", {
                          domain : domain
                      });
                   cpuMemoryChart.updateBrush(0, {
                       type: "line",
                       target: ["Cpu", "Memory"]
                    });
                    cpuMemoryChart.render(false);
       }

개발자도구를 보게되면 g visibility="visible" 값이 g visibility="hidden" 으로 계속 서로 바뀌면서 툴팁이 깜빡이는 것처럼 보이는 것 같습니다.