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 문서