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

누적 그래프를 추가하는 방법을 알고싶습니다. > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

VueJS 누적 그래프를 추가하는 방법을 알고싶습니다.

페이지 정보

작성자 MyungGyu 작성일 2021-10-25 10:29 조회 4,025회 댓글 0건
제품 버전 : 5.20212.812
컨트롤 이름 : FlexChart, Series

본문

아래와 같은 기본 세로 막대 그래프가 있는 차트에서


280b5f32078a9d84d44180b3dc81612d_1635125460_8776.png
 

아래처럼 세로 누적 막대 그래프를 추가하려고 합니다.


280b5f32078a9d84d44180b3dc81612d_1635125467_6706.png
 


여기서 new Series 객체를 이용해 새로운 시리즈를 추가 해보려고 했는데


아래처럼 새로운 시리즈를 추가하면 누적을 적용할 수 없는 단일 세로 막대만 되는 거 같더라구요.


280b5f32078a9d84d44180b3dc81612d_1635125473_7794.png
 


어떤 방법을 사용해야 동일한 막대 위치에 새로운 누적 막대 그래프를 그릴 수 있을까요?



아래는 위의 시리즈 추가한 코드입니다.

this.chart.beginUpdate();
const series = new Series();
series.itemsSource = this.data;
series.chartType = ChartType.Column;
series.binding = 'B';
series.bindingX = 'name';
series.name = 'B';
this.chart.series.push(series);
this.chart.endUpdate();
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

1 답변

VueJS Re: 누적 그래프를 추가하는 방법을 알고싶습니다.

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

페이지 정보

작성자 GCK루시 작성일 2021-10-25 15:13 댓글 0건

본문

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


Wijmo Chart에서는 누적차트와 일반 바 차트를 동시에 표시하도록 설정하는 직접적인 메서드 또는 속성을 지원하고 있지 않습니다. 다만, 말씀하신 형태의 차트를 구현하기 위해서는 FlexChart의 차트가 렌더링이 끝난 뒤 발생하는 rendered 이벤트와 Y축 설정을 이용하시면 됩니다.


먼저, 차트의누적을 결정하는 stacking 속성을 stacked로 설정하고 일반 바 차트로 사용하실 series에 wj-flex-chart-axis 요소를 추가하신 뒤, rendered 이벤트 내에서 해당 계열의 x 위치와 너비를 재설정하시면 됩니다. 자세한 코드는 샘플에서 확인하실 수 있습니다.


 


[rendered]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_chart.flexchart.html#rendered 


[stacking]

https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_chart.flexchart.html#stacking


[다중 축 데모]

https://demo.grapecity.co.kr/wijmo/learn-wijmo/Chart/Features/MultipleAxes/purejs 


도움말 문서 및 데모 문서를 전달 드리오니 다른 궁금한 점이 생기면, 문의 주시기 바랍니다. 


감사합니다. 

그레이프시티 드림 



* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다

댓글목록

등록된 댓글이 없습니다.

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