PureJS flexChart 가로막대형 문의
페이지 정보
작성자 Nexus 작성일 2024-02-02 17:07 조회 43회 댓글 0건본문
관련링크
안녕하세요
아래와같은 가로막대형 차트를 누적형이 아닌 각 시간별로 나타내고있는데
누적데이터가 아니어서 그런지 모두 동일한 색상으로 출력됩니다.
각 데이터 색상을 변경할 수 있는 방법 문의드립니다.
감사합니다.
댓글목록
등록된 댓글이 없습니다.
안녕하세요
아래와같은 가로막대형 차트를 누적형이 아닌 각 시간별로 나타내고있는데
누적데이터가 아니어서 그런지 모두 동일한 색상으로 출력됩니다.
각 데이터 색상을 변경할 수 있는 방법 문의드립니다.
감사합니다.
등록된 댓글이 없습니다.
안녕하세요 메시어스입니다.
해당 현상의 경우, 일반적으로 누적막대형 같은 차트 유형이 원인이기 보다는 아래 이미지와 동일한 binding 값으로 설정된 series 이기 때문에 동일한 series 색상을 가지게 됩니다.
따라서 해당 색에 대한 구별을 위해 데이터가 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" } })
다른 궁금한 점이 생기면 문의주시기 바랍니다.
감사합니다.
메시어스 드림
등록된 댓글이 없습니다.
안녕하세요
따라서 해당 색에 대한 구별을 위해 데이터가 series에 동일한 binding 값으로 설정되어 있다면 다른 key 값으로 변경하시기 바랍니다.
라고 하셨는데 key값을 여러개로 하면 series: 에 설정을 어떻게 해야하나요?
이런식으로 설정이 가능한가요?
등록된 댓글이 없습니다.
안녕하세요 메시어스입니다.
혼동을 드려 죄송드리며 언급드렸던 key의 경우, series 컬렉션의 binding 값이 아닌 아래 이미지와 같이 chart 데이터의 키 값 변경을 말씀드렸던 것이었습니다.
이미지에 참고했던 데모를 공유드리오니 확인 바랍니다.
더불어 하나의 series에는 하나의 binding 속성을 가지기 때문에 공유해주셨던 코드와 같이 사용이 어려운 점 업무에 참고 부탁드립니다.
감사합니다.
메시어스 드림