작성일 2023-03-13 12:46 조회 537회
댓글 0건
안녕하세요
한 페이지에 차트를 여러 개 표현해주고 있는데 axisY의 값의 길이에 따라 axisY영역 너비가 달라져 차트들이 고르게 보이지 않고 있습니다.
ex> chart1 : 1~10, chart2 : 1000 ~ 9000
차트의 axisY 영역부분 너비를 지정하고 싶은데 가능한 방법 가이드 부탁드립니다.
감사합니다.
등록된 댓글이 없습니다.
2 답변
작성일 2023-03-14 13:47 댓글 1건
안녕하세요 그레이프시티입니다.
문의하신 axisY 영역의 너비를 조절하고 싶으신 경우, 축 라벨의 padding을 설정할 수 있는 labelPadding 속성을 이용해보시기 바랍니다. 아래 간단한 코드 및 API 문서를 공유드리오니 참고 부탁드립니다.
<wj-flex-chart
:initialized="initializeChart"
>
(....)
initializeChart: function (flex) {
flex.axisY.labelPadding = 70;
}다른 궁금한 점이 생기면 문의 주시기 바랍니다.
감사합니다.
그레이프시티 드림
작성일
안녕하세요
답변 감사드립니다.
다만, 해당 기능으로 해결되지 않는 문제가 있어 다시 문의 드립니다.
두 개의 차트가 axisY 값 길이가 일정하다면 짧은 차트의 labelpadding으로 조절하여 맞추면 해결될 것으로 보이나 axisY값이 유동적이어서 길이가 달라질 경우 padding 값으로 맞춘 것이 다시 틀어지게 됩니다.
ex1>
1번차트 100,200,300,400
2번차트 1,2,3,4
ex2>
1번차트 10,20,30,40
2번차트 10,20,30,40
ex1번 기준으로 padding 설정하면 ex2번과 같이 데이터 조회될 경우 차트의 위치가 달라지게 됩니다.
axisY 영역의 폭 또는 차트 시작위치를 고정할 수 있는 방법이 있는지 다시 확인 부탁드립니다.
감사합니다.
작성일 2023-03-20 13:54 댓글 1건
안녕하세요 그레이프시티입니다.
문의하신 내용에 대해 안내 드립니다.
해당 기능을 구현하기 위해서는 먼저 FlexChart의 렌더링이 끝난 후 발생하는 rendered 이벤트를 이용하여 차트 라벨을 설정하고 CSS를 통해 기존 라벨을 숨김 처리해줍니다. 그 다음 차트의 plot 영역을 고정하고 싶으신 경우, plot의 margin을 설정할 수 있는 plotMargin 속성을 할당해주시면 됩니다.
다만, 차트 라벨을 커스터마이징했기 때문에 창 크기가 바뀌어도 올바르게 라벨이 렌더링될 수 있게 resize 이벤트 핸들러를 통해 차트를 새로고침해주시기 바랍니다.
자세한 코드는 아래 샘플에서 확인하실 수 있습니다.
API 문서를 공유드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.
감사합니다.
그레이프시티 드림
작성일
