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

line chart 사용시에 activeEvent : "click" 설정 후 리얼타임 차트 적용시 brush가 원상태로 돌아가는 문제. #92

Open JangCool opened 8 years ago

JangCool commented 8 years ago

안녕하세요.

쓰다보니 자꾸 이슈가 생기네요. 바쁘실텐데 미안합니다.

1

이미지보시면 설명이 되어있는데

line chart 사용시에 activeEvent : "click" 속성을 지정 후 realtime 차트에 적용 하면 맨처음 특정 line brush 에 클릭하면 불투명하게 되면서 잘 안보이나 이후 x축이 이동하면 다시 원상태로 복구되는 현상이 있습니다.

x축으로 이동 하더라도 click시에 불투명한 상태를 계속 유지되었으면 하는데 방법이 없는지요??

function getRandom() {
    return Math.floor(Math.random() * 50);
}

function getData(count) {
    var data = [];

    for(var i = 0; i < count; i++) {
        data[i] = {
            value1: getRandom(),
            value2: getRandom()
            };
    }

    return data;
}

jui.ready([ "chart.builder" ], function(builder) {
    var data1 = [];
        data2 = getData(150);

    var chart2 = builder("#chart2", {
        width: 800,
        height : 200,
        axis : {
            x : {
                type : "dateblock",
                domain : [ new Date() - 1000 * 60 * 5, new Date() ],
                interval : 1,               // 단위 시간에 대한 간격 설정
                realtime : "minutes",       // 단위 시간 설정
                format : "hh:mm"
            },
            y : {
                type : "range",
                domain : [ 0, 100 ]
            }
        },
        brush : {
            type : "line",
            target : [ "value1", "value2" ],
            clip: false,
            display:["max"],
            activeEvent : "click"

        },
        render : false
    });

    setInterval(function() {
        var end = new Date(),
            start = new Date() - 1000 * 60 * 5,
            domain = [ start, end ];

        data2.shift();
        data2.push({
            value1: getRandom(),
            value2: getRandom()
        });

        chart2.axis(0).updateGrid("x", { domain : domain });
        chart2.axis(0).update(data2);
        chart2.updateBrush(0,{
            target :  [ "value1", "value2"]
        },false);   
        chart2.render();
    }, 2000);
});