! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

라인 차트 최대/최소값만 표시 문의 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

ReactJS 라인 차트 최대/최소값만 표시 문의

페이지 정보

작성자 fxdev1 작성일 2024-02-02 11:06 조회 51회 댓글 0건
제품 버전 : 5.20231.904

본문


 

안녕하세요.


1. 두개 이상의 ​라인 차트가 존재할때, Y축에 각각의 최대/최소값만 표시할 수 있을까요? 


노란색 차트의 경우 

최소값 :62

최대값: 72 이고,


파란색 차트일 경우 

최소값 :40

최대값: 60

입니다


Y축에는 [40, 60, 62, 72] 로 총 4개의 라벨만 나올수 있는지 부탁드립니다.


2. 해당 라벨의 [40, 60, 62, 72] 의 색상도 변경할수 있을까요?


62, 72 : 노란색

40, 60 : 파란색


각각 라인차트에 해당하는 색을 Y축 라벨에도 변경 가능한지 부탁드립니다.


감사합니다.

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

2 답변

ReactJS Re: 라인 차트 최대/최소값만 표시 문의

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 MESCIUS루시 작성일 2024-02-06 10:28 댓글 1건

본문

안녕하세요 메시어스입니다.


문의하신 내용에 대해 답변드립니다.


1. 두개 이상의 series를 지닌 ​라인 차트가 존재할때, Y축에 각 series의 최대/최솟값만 표시 문의

=>Y축에 대한 차트의 외관을 사용자 정의할 수 있는 itemFormatter를 사용하여 다른 라벨의 텍스트를 빈 문자열로 설정하여 축에서 숨길 수 있습니다. 


더불어 축 라벨 사이의 유닛을 설정하는 'majorUnit' 속성을 이용하여 각 가능한 값에 대한 그리드 라인을 표시해줍니다. 그 다음 FlexChart 렌더링이 끝난 후 발생하는 'rendered' 이벤트를 처리하여 차트에서 추가적인 그리드 라인을 제거해야합니다.


2. 해당 라벨이 series에 맞는 색으로 변경 문의

=> FlexChart의 'initialized' 이벤트를 처리하여 최솟값, 최댓값 및 series 색상에 관한 정보를 추출한 다음, 이 정보를 사용하여 itemFormatter 함수에서 축 레이블을 스타일링할 수 있습니다.


위의 문의에 대한 코드는 아래 샘플에서 확인할 수 있습니다.


다만 샘플의 경우, 커스터마이징을 통한 기능 구현한 내용입니다. 따라서 Y축의 제목 및 라벨 텍스트를 올바르게 표시하기 위해 plot의 마진을 설정하는 plotMargin 속성을 조정해야 할 수도 있습니다. 


샘플에서는 plotMargin을 적절히 설정하고 축 제목이 올바르게 표시되도록 CSS에서 'transform: translate(0, -40px);'를 사용했습니다.



다른 궁금한 점이 생기면 문의주시기 바랍니다.


감사합니다.

메시어스 드림

댓글목록

fxdev1님의 댓글

fxdev1 작성일

Y축 값이 22.10, 21 일때 라벨이 겹치기 때문에 하나만 나오는거 같은데 이건 어쩔 수 없는건가요?

ReactJS Re: 라인 차트 최대/최소값만 표시 문의

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 MESCIUS루시 작성일 2024-02-13 11:13 댓글 1건

본문

안녕하세요 메시어스입니다. 


차트의 축 라벨, 누금 및 그리드 선을 렌더링하는 기능을 담당하는  '_renderLabelSandTicks' 기능을 재정의하여 원하는 결과를 구현할 수 있습니다.

자세한 코드는 아래 샘플에서 확인할 수 있습니다.



위의 샘플을 참고하여 필요한 메소드를 재정의한 후에 그리드 라인과 라벨이 올바르게 렌더링되도록 y축의 최소 및 최대 값이 설정되었는지 확인하시길 바랍니다.


다른 궁금한 점이 생기면 문의주시기 바랍니다.


감사합니다.

메시어스 드림

댓글목록

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.