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

canvas.scatter 관련 질문입니다. #85

Open amang7 opened 8 years ago

amang7 commented 8 years ago

widget에 legend 추가 하고 filter true를 설정했는데 filter 기능이 동작하지 않습니다. scatter에서만 가능하고 canvas.scatter는 불가능한건가요?

chart play에 있는 예제 http://chartplay.jui.io/?p=range_scatter_dragselect 에서 일부 수정했습니다.

샘플 테스트 코드는 아래와 같습니다.

var chart = jui.include("chart.builder");
var time = jui.include("util.time");

function getNumber() {
    return Math.round(Math.random() * 30  % 20);
}

var start = new Date(),
    end = time.add(start, time.hours, 5),
    data = [];

for(var i = 0; i < 30; i++) {
    data.push({
        time : time.add(start, time.minutes, i*10),
        sales : getNumber(),
        profit : getNumber() * 0.75,
        total : getNumber() * 1.5
    });
}

chart("#result", {
    padding : {
        left : 70
    },
    canvas:true,
    axis : {
        x : {
            type : "date",
            domain : [ start, end ],
            interval : 1000 * 60 * 60, // 1hours
            format : "hh:mm",
            key: "time",
            line : true
        },
        y : {
            type : "range",
            domain : "total",
            step : 10,
            line : true
        },
        data : data
    },
    brush : {
        type : "canvas.scatter",
        size : 7,
        target : [ "sales", "profit", "total" ]
    },
    widget : [{
        type : "title",
        text : "Scatter Sample"
    }, {
        type : "dragselect",
        dataType : "list" // or "area"
    }, {
        type : "tooltip"
    },{
      type:"legend",
      filter:"true"
    }],
    event : {
        "dragselect.end": function(data) {
            console.log(data);
        },
        "click": function(data) {
            console.log(data);
        }
    }
});