Open j2hlove opened 6 years ago
@j2hlove 안녕하세요.
jui 차트 써주셔서 감사합니다.
순서대로 답변을 드릴게요.
http://chartplay.jui.io/?p=grid_text_rotate
{ textRotate : -10 } // -10 도 회전
회전을 시키시면 영역이 좀 달리 보이실 꺼에요.
http://chartplay.jui.io/?p=chart_padding
차트 생성하실 때 padding 옵션을 줄 수 있는데요.
{ padding : { left : 100 } } // left 기본이 50 ,
50 이상 정의 하셔서 화면을 보시면 될 듯 합니다.
답변 감사합니다.
알려주신대로 수정하였는데 몇가지 더 여쭤 보겠습니다.
1.
위 두개의 이미지 하단에 처럼 로테이션을 시켰는데 텍스트 글자가 X축 하단 라인에 결치는 경우가 생깁니다. 안 걸치게 하려고 이래저래 돌려봐도 텍스트가 긴경우에 걸치게 되던데요...
그리고 두번째 이미지 처럼 텍스트와 그래프의 색깔을 설명해주는 부분하고도 겹치는 경우가 발생합니다.
그래서
텍스트 영역의 높이를 조절할 수 있나요? 상하 높이를 원하는 치수로 줄였다 높일수 있나요?
2.
알려주신대로 하니 글 짤림현상은 없어졌는데요
위의 글자와 아래의 글자가 너무 붙어 있어서 좀 복잡해 보이는데요
그래서 위와 아래 글자간의 간격을 줄 수 있는 옵션이 없나요?
그러니깐 예로 청호정밀과 엔터인이 너무 상하로 붙어 있어서 그 간격을 좀 벌이고 싶습니다.
위 그림처럼 하단의 그래프의 색깔별 항목표시 부분에 갯수가 많아지면 2줄로 바뀌게 되는데
이때 X축의 텍스트와 겹치는 현상이 나타납니다.
그래프의 색깔별 항목표시하는 영역의 높이나 X축과의 간격을 지정할 수 있는 방법이 없을까요?
번거로우시드라도 답변 부탁드리겠습니다.
그럼 수고하세요~~
@j2hlove
1번의 경우는 테스트 길이가 길어서 더 그런면이 있는데요. 현재는 축이랑 테스트의 간격을 조정하는건 없습니다. 다만 축 자체의 간격을 벌일 순 있습니다. 좀 복잡하지만 이건 예제를 따로 만들어볼게요.
차트 자체에 속성이 없기 때문에 조금의 트릭을 사용합니다. 방법은 일단 x, y 축 2개씩 만들고 x 축 하나는 hide : true 으로 숨기구여. 나머지 하나를 숫자 표시 용도로 사용합니다.
axis : [{
x : {
type : "block",
domain : "quarter",
line : true,
hide: true // x 축 하나는 숨깁니다. 브러쉬는 여전히 이걸 보기 때문에 상관 없어요. 화면에 안 보일 뿐
},
y : {
type : "range",
domain : [ -40, 40 ],
step : 10,
line : true
},
data : [
{ quarter : "1Q", sales : 50, profit : 35 },
{ quarter : "2Q", sales : -20, profit : -30 },
{ quarter : "3Q", sales : 10, profit : -5 },
{ quarter : "4Q", sales : 30, profit : 25 }
]
}, {
x : {
type : "block",
domain : "quarter",
color: 'white', // 두번째 x 축에서 축 색을 바꿉니다. 배경색으로 그럼 축이 안 보이게 되고
line: false,
dist: 20, // 축 자체를 원래 위치에서 20px 간격으로 넓힙니다. ,
textRotate : 20 // 이 상태로 텍스트를 회전 하시면 좀 더 넓은 화면으로 하실 수 있어요.
},
y : {
type : "range",
domain : [ -40, 40 ],
step : 10,
line : true,
hide: true
},
data : [
{ quarter : "1Q", sales : 50, profit : 35 },
{ quarter : "2Q", sales : -20, profit : -30 },
{ quarter : "3Q", sales : 10, profit : -5 },
{ quarter : "4Q", sales : 30, profit : 25 }
]
}],
2번의 경우는 차트를 너무 작게 쓰시는게 원인 인듯 합니다만
text size 를 조정하면 좀 더 표현할 수 있는 공간이 늘어날 듯 하네요. 차트 생성하실 때
chart.builder('#xxx', {
....,
style : {
gridYFontSize: 9 // 이부분 조정하시면 y 축 폰트 사이즈 줄일 수 있습니다.
}
})
3번의 경우는 하단 여백이 너무 부족해서 그렇습니다. 차트 생성하실 때 padding 옵션으로 여백을 조정할 수 있습니다.
{
padding : { bottom : 100 } // bottom 영역을 100 정도 주시고 테스트 해보세요.
}
아 혹시 여기서 더 질문해도 될까 싶어 하나 남깁니다. 저도 똑같은 문제가 있는데 저는 x축의 특정 텍스트가 튀어나가는 경우에 줄을 바꾸고 싶습니다.
x: {
type: "block",
domain: "type",
line: false,
format : function(d) {
if(d=="가나다라마바사"){
return "가나다라\n마바사"
} else {
return d
}
},
},
이렇게 구현하면 다음 줄로 내려가는게 아니라 미묘하게 줄 차이가 나더라구요.. 혹시 해결 방법이 있을까요?
안녕하세요
깔끔하고 연동도 쉬운 jui차트 잘 쓰고 있습니다.
몇가지 궁금한점이 있어 질문 드립니다.
위에 두 그래프에서 보듯이 X축의 글자들이 길어 너무 붙어 있습니다. X축의 단위 간격을 늘일 수 있는 방법이나 글자가 길면 자동줄바꿈이 되는 방법 또는 말줄임(마우스오버시 풀네임노출)의 기능등 글자길이가 길 경우 처리할 수 있는 방법이 없을까요?
이 그래프도 간격 문제입니다. 이번에는 Y축인데요.. Y축은 글자가 길면 짤리는 경우가 있는것 같은데요. Y축도 글자 자동 줄바꿈이 있나요? 그리고 그래프간 간격(상하)을 더 늘이고 싶은데요 이 부분도 방법이 있으면 알려주시면 감사하겠습니다.
바쁘시겠지만 답변 부탁드리겠습니다.
그리고 좋은 그래프 만들어 줘서 감사합니다 ^^