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

차트 사용 방법질문 올립니다.(dragselect관련) #163

Open qudgur5442 opened 6 years ago

qudgur5442 commented 6 years ago

안녕하세요.

너무 자주 이슈를 올리는 것 같아서 죄송합니다.

  1. x축 type이 date이면 드래그 기능해서 데이터가 추출되지만 dateblock일 경우 빈 배열 값을 추출하고 있습니다... 혹시 사용방법을 알 수 있을까요..?

`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, i10), sales : getNumber(), profit : getNumber() 0.75, total : getNumber() * 1.5, dataKey: 15 }); }

chart("#result", { padding : { left : 70 }, axis : { x : { type : "dateblock", 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 : "line", target : [ "sales", "profit", "total" ] }, widget : [{ type : "title", text : "Scatter Sample" }, { type : "dragselect", dataType : "list" // or "area" }, { type : "tooltip" }], event : { "dragselect.end": function(data) { console.log(data); }, "click": function(data) { console.log(data); } } });`

  1. 데이터의 값이 없으면 null을 넣어서 사용하고 있습니다.

만약에 값이 null이 들어가 있으면 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++) { if(i<15){ data.push({ time : time.add(start, time.minutes, i10), sales : null, profit : getNumber() 0.75, total : getNumber() 1.5, dataKey: 15 }); } else data.push({ time : time.add(start, time.minutes, i10), sales : getNumber(), profit : getNumber() 0.75, total : getNumber() 1.5, dataKey: 15 }); }

chart("#result", { padding : { left : 70 }, 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 : "line", target : [ "sales", "profit", "total" ], activeEvent: "mouseover" // ,active: dataset.line[0] // 처음 그려질때 apple을 강조 }, widget : [{ type : "title", text : "Scatter Sample" }, { type : "dragselect", dataType : "list" // or "area" }, { type : "tooltip" }], event : { "dragselect.end": function(data) { console.log(data); }, "click": function(data) { console.log(data); } }, render :false }); `

확인 부탁드립니다

감사합니다.