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

가로바 차트 Y 축 양쪽 Text 라벨 표현하기 문의 > Q&A | 토론

본문 바로가기

PureJS 가로바 차트 Y 축 양쪽 Text 라벨 표현하기 문의

페이지 정보

작성자 비와이씨 작성일 2022-10-05 10:33 조회 969회 댓글 1건
제품 버전 : 최신버전
컨트롤 이름 : FlexChart

본문

첨부파일

아래와 같이 가로 Bar 차트에서 Y축 왼쪽 레이블 표시는 했는데,

오른쪽 레이블(둘다 TEXT) 표시 가능할까요?

하나의 차트에 1개의 양쪽 레이블 정보 이긴 합니다.

(첨부 그림파일 참조)

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

댓글목록

GCK다이애나님의 댓글

GCK다이애나 작성일

안녕하세요 그레이프시티입니다.

문의 주신 내용에 대해 현재 확인 중에 있습니다.
확인 되는 대로 답변 드리도록 하겠습니다.

감사합니다.
그레이프시티드림

1 답변

PureJS Re: 가로바 차트 Y 축 양쪽 Text 라벨 표현하기 문의

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

페이지 정보

작성자 GCK다이애나 작성일 2022-10-11 10:04 댓글 0건

본문

안녕하세요 그레이프시티입니다.


먼저 답변이 지연된 점 죄송합니다.


문의 주신 가로 막대 형 차트의 Y 축 레이블을 양 측에 표기하는 방법에 대해 답변 드립니다.

FlexChart 컨트롤의 rendered 이벤트 호출 시 drawString 메서드를 사용해 Y 축 레이블을 우측에 생성하는 코드를 구현하여 Y 축 레이블을 양 측에 표기 할 수 있습니다.

아래의 샘플을 참고해 보시기 바랍니다.

샘플은 다음과 같은 방법으로 구현되었습니다.

  1. rotated 속성이 true인 막대 형 차트를 생성합니다.
  2. 막대 형 차트의 plotMargin 속성을 '50 150 50 150' 으로 지정합니다.
  3. 생성된 막대 형 차트의 rendered 이벤트에 다음과 같은 코드를 구현합니다.
    -1. querySelectorAll 메서드를 이용하여 Y 축 레이블 요소들을 변수 labels 에 저장합니다.
    -2. getBoundingClientRect 메서드를 이용하여 우측에 생성될 Y 축 레이블 요소들의 위치와 너비, 높이 값을 불러와 변수 x, y, width, height 에 각각 저장합니다.
    -3. drawString 메서드를 이용하여 변수 labels 를 통해 불러온 Y 축 레이블 요소의 textContent 속성의 값을 변수 x, y, width, height 로 계산한 위치에 표기합니다.


- rendered API 문서

- drawString API 문서


API 문서를 공유드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.


그레이프시티 드림


댓글목록

등록된 댓글이 없습니다.

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