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

flexChart 가로막대형 문의 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

PureJS flexChart 가로막대형 문의

페이지 정보

작성자 Nexus 작성일 2024-02-02 17:07 조회 43회 댓글 0건
제품 버전 : 2022v1
컨트롤 이름 : flexchart

본문

안녕하세요

아래와같은 가로막대형 차트를 누적형이 아닌 각 시간별로 나타내고있는데

누적데이터가 아니어서 그런지 모두 동일한 색상으로 출력됩니다.


 

각 데이터 색상을 변경할 수 있는 방법 문의드립니다.


감사합니다.

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

댓글목록

등록된 댓글이 없습니다.

3 답변

PureJS Re: flexChart 가로막대형 문의

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

페이지 정보

작성자 MESCIUS루시 작성일 2024-02-05 14:59 댓글 0건

본문

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


해당 현상의 경우, 일반적으로 누적막대형 같은 차트 유형이 원인이기 보다는 아래 이미지와 동일한 binding 값으로 설정된 series 이기 때문에 동일한 series 색상을 가지게 됩니다.

 

8dfdea042ebbda4cbc7dad8b66cb881d_1707112636_2451.png
 

따라서 해당 색에 대한 구별을 위해 데이터가 series에 동일한 binding 값으로 설정되어 있다면 다른 key 값으로 변경하시기 바랍니다. 


혹은 차트의 palette 값이 아래 코드와 같이 하나의 값으로만 설정되어 있는지도 확인 및 별도의 색상 값을 추가해보시기 바랍니다.


let barchart = new chart.FlexChart('#chart', {
   (...)
   palette: ['rgba(42,159,214,1)']
});


만일 데이터 변경이 어려우시거나 palette 값이 이미 여러 개로 설정되어 있는 경우, 차트가 렌더링이 끝난 후 발생하는 rendered 이벤트 내에서 seriesGroup을 접근하여 rect 요소의 색상을 변경처리 할 수 있습니다.


let barchart = new chart.FlexChart('#chart', {
   (...)
        rendered:function(s,e){
            var seriesGroup = document.querySelector(".wj-series-group").childNodes[0].childNodes
            seriesGroup[0].style.fill = "red"
            seriesGroup[1].style.fill = "green"
        }
})


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


감사합니다.

메시어스 드림

댓글목록

등록된 댓글이 없습니다.

PureJS Re: flexChart 가로막대형 문의

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

페이지 정보

작성자 Nexus 작성일 2024-02-05 15:34 댓글 0건

본문

안녕하세요


따라서 해당 색에 대한 구별을 위해 데이터가 series에 동일한 binding 값으로 설정되어 있다면 다른 key 값으로 변경하시기 바랍니다. 


라고 하셨는데 key값을 여러개로 하면 series: 에 설정을 어떻게 해야하나요?


series: [{
      binding: 'Time',
      binding: 'Time2',
      binding: 'Time3'
    }],


이런식으로 설정이 가능한가요?

댓글목록

등록된 댓글이 없습니다.

PureJS Re: flexChart 가로막대형 문의

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

페이지 정보

작성자 MESCIUS루시 작성일 2024-02-05 16:16 댓글 1건

본문

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


혼동을 드려 죄송드리며 언급드렸던 key의 경우, series 컬렉션의 binding 값이 아닌 아래 이미지와 같이 chart 데이터의 키 값 변경을 말씀드렸던 것이었습니다. 



8dfdea042ebbda4cbc7dad8b66cb881d_1707117289_1362.png
 

이미지에 참고했던 데모를 공유드리오니 확인 바랍니다.


- 누적 가로 막대형 차트 데모


더불어 하나의 series에는 하나의 binding 속성을 가지기 때문에 공유해주셨던 코드와 같이 사용이 어려운 점 업무에 참고 부탁드립니다.

  

감사합니다.

메시어스 드림

댓글목록

Nexus님의 댓글

Nexus 작성일

아뇨 맞게 잘 설명해주신것같습니다 제가 이해가 부족했어요! 답변해주신내용으로 해결했습니다 감사합니다.

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