[FlexChart] 간트 차트 CSS 및 차트 요소 이동 방법 > 지식 쉐어링

본문 바로가기

개발꿀팁 [FlexChart] 간트 차트 CSS 및 차트 요소 이동 방법

페이지 정보

작성자 GCK루시 작성일 23-01-20 14:36 조회 15회 댓글 0건

본문

Wijmo 간트 차트는 프로젝트 일정을 보여주는 특수 차트로 해당 차트 관련 기능에 대해 설명하도록 하겠습니다.


1. 간트 차트 CSS 

=>  간트 차트의 특정 영역에 대한 배경색을 수정하고 싶은 경우, 차트 요소의 모양을 커스터마이징할 수 있는 itemFormatter에서 조건에 맞는 task bar 요소의 fill 속성을 설정하시면 됩니다. (간트 차트의 진행상태를 나타내는 bar의 색깔도 itemFormatter에서 설정할 수 있습니다.)

var theChart = new wijmo.chart.FlexChart('#theChart', {
    (...)
    itemFormatter: ganttItemFormatter,
    (...) 
function ganttItemFormatter(engine, ht, defaultFormatter) {
    // 특정 Task 색깔 변경
    if(ht.item.name == "Task7"){
      engine.fill = "#063970"
    }
}


2. 차트 요소 이동 방법 

=> Wijmo에서 기간을 변경하여 요소를 이동시키고 싶은 경우, 특정 이벤트에서 기본 데이터 컬렉션인 sourceCollection에 접근 및 날짜 데이터를 수정 처리한 뒤, 업데이트 된 상태를 반영하기 위해 데이터를 refresh 해주시면 됩니다.


* change 버튼을 클릭하여 차트 기간 이동을 확인해보시기 바랍니다.


아래 샘플을 공유 드리오니 참고 부탁 드립니다.


- 간트차트 데모

- itemFormatter API 문서

- sourceCollection API 문서

- refresh API 문서


  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2023 GrapeCity inc.