Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Line chart 관련 질문 #215

Open
yimchang opened this issue Jul 24, 2019 · 0 comments
Open

Line chart 관련 질문 #215

yimchang opened this issue Jul 24, 2019 · 0 comments

Comments

@yimchang
Copy link

yimchang commented Jul 24, 2019

안녕하세요
Line Chart 관련 질문이 있어 이렇게 글을 올립니다.

jui chart를 통해 단가표를 만드는 상황입니다.

현재 data변수에 날짜가 들어간 상태이며
data변수에 있는 날짜 데이털르 통해
x축의 최소값, 최대값 지정을 해주는 상태입니다. ( 최초 날짜 ~ 현재 날짜)

이 상황에서 interval 값을 하루가 아닌 그 이상의 값으로 설정하면 x축의 날짜가 최초 날짜(0,0) 이외에 보이지 않는 상황입니다. 이 상황을 고치려면 어떻게 해야할까요?

해결 방안 중 생각하는 방법 하나는 예를들면
7/1 ~ 7/15 일까지의 데이터를 보여줄 때 x축 (일 수 )기준으로 7/1~부터 15일까지의 그래프를 그리려는 상황입니다. 이 상황에서 7/1일 부터 데이터를 그리는게 아닌 7/15일을 기준으로 거꾸로 데이터를 그리는 방법이 있나요?

interval 값은

var oneDay = 24 * 3600 * 1000;
		    var interval = 0;
		    if (range == '7d') {   //1주일
		    	interval = oneDay;
		    } else if (range == '1m') {  //1개월
		    	interval = oneDay * 3;
		    } else if (range == '3m') { //3개원
		    	interval = oneDay * 7;
		    } else if (range == '6m') { //6개월
		    	interval = oneDay * 15;
		    } else if (range == '1y') { //1년
		    	interval = oneDay * 30;
		    } else {
		    	interval = oneDay;
		    }

입니다

제가 사용하는 jui chart 코드는 아래와 같습니다.

function drawGraph(data, interval, minPrc, maxPrc) {
graph.ready([ "chart.builder" ], function(builder) {
builder("#chart", {
width: $("body").width()-32,
height: 400,
axis : {
x : {
type : "date"
, domain : [data[0].date, data[data.length - 1].date]
, interval : interval
, format : "MM.dd"
, key : "date"
, line : true
},
y : {
type : "range"
, domain : [minPrc, maxPrc]
, step : 5
, format : function(value) {
return format.num(value);
}
},
data : data
},
brush : [{
type : "line"
, target : ["salePrc"]
, display :"min"
, colors : function(data, i) {
return "#F26A21";
}
}, {
type : "area"
, target : ["salePrc"]
, colors : function(data, i) {
return "#FEF0E8";
}
}, {
type : "scatter"
, size : 9
, target : ["salePrc"]
, colors : function(data, i) {
return "#F26A21";
}
}],
widget : [
{
type : "tooltip",
orient : "top",
format : function(data, key) {
return format.num(data["salePrc"]);
},
brush : 2
}],
style : {
tooltipBorderColor : "#F26A21"
, tooltipBackgroundColor : "#F26A21"
, tooltipFontColor : "#FFFF"
}
});
});
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant