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

Area Chart에서 배경에 조건부 서식을 줄수 있는지 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

VueJS Area Chart에서 배경에 조건부 서식을 줄수 있는지

페이지 정보

작성자 hyok 작성일 2022-10-05 15:21 조회 1,122회 댓글 0건
제품 버전 : 5.20221.857-rc
컨트롤 이름 : FlexChart

본문

5ede11815a4644dc5ea047e972248e9c_1664950955_8453.png 


안녕하세요 다음과 같이 Area Chart를 만들어서 사용하려 하는데 

라인 부분은 itemFormatter에 engine.drawLine으로 셋팅을 했는데 배경도 특정색으로 바꾸고 싶은데 부분 서식을

설정할 수 있는 방법이 있을까요?

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

댓글목록

등록된 댓글이 없습니다.

1 답변

VueJS Re: Area Chart에서 배경에 조건부 서식을 줄수 있는지

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

페이지 정보

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

본문

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


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


문의 하신 영역 차트의 배경색을 조건부 서식으로 변경하는 방법에 대해 답변드립니다.

drawLine 메서드를 이용해 차트의 특정 영역을 선으로 채워 해당 영역의 배경색을 변경할 수 있습니다.

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

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

  1. chartType 속성 값이 "Area" 로 지정된 FlexChart 컨트롤을 생성합니다.
  2. 사용자 정의 함수 fillArea 를 다음과 같은 방법으로 구현합니다.
    -1. 매개 변수 ht 와 dataToPoint 메서드를 이용하여 특정 영역의 시작점에 해당하는 차트의 Point 속성의 값을 변수 pt1에, 끝점에 해당하는 값을 변수 pt2에 저장합니다.
    -2. 변수 pt1과 pt2를 이용하여 특정 영역에 존재하는 x와 y 좌표 값들을 변수 x 와 y에 저장합니다.
    -3. 이때, x 배열 값 개수와 y 배열 값 개수가 동일하게 저장되도록 구현합니다.
    -4. querySelector 메서드와 getAttribute 메서드를 이용하여 x 축과 맞닿는 y 좌표 값을 변수 y1에 저장합니다.
    -5. 반복문을 통해 배열 x 와 y, 변수 y1를 매개 변수로 사용하는 drawLine 메서드를 호출합니다.
  3. FlexChart 컨트롤의 itemFormatter 속성에 조건문을 통하여 특정 조건에서 사용자 정의 함수 fillArea를 호출하는 코드를 구현합니다.


- drawLine API 문서

- FlexChart 조건부 서식 도움말


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


감사합니다.


그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

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