데이터 그리드는 데이터를 표시하고 편집하는 데 유용합니다. 데이터를 편집, 구성, 검사 및 변경할 수 있습니다. 차트는 데이터를 시각화하는 좋은 방법입니다. 트렌드를 보고 즉시 비교할 수 있습니다.

FlexGrid를사용하면 차트와 데이터 그리드를 단일 뷰로 결합하여 만들 수 있습니다. 이는 그리드의 formatItem 이벤트를 사용하여그리드 셀에 막대를 추가하기만 하면됩니다.

아래 샘플을 통해 설명해 보겠습니다.

• https://jsfiddle.net/Wijmo5/3xv4w76o/

위의 샘플은 두 개의 막대 차트를 포함하는, 그룹화 가능하고, 정렬 가능하고, 편집 가능한 그리드를 만듭니다.

이 차트를 통해 사용자는 각 제품의 판매량과 수익을 즉시 확인할 수 있습니다. 사용자가 그리드를 스크롤하면 막대가 판매 및 매출이 특히 높거나 낮은 제품 및 기간을 자동으로 강조 표시합니다.

이 응용 프로그램을 만드는 데 필요한 단계는 아래와 같습니다.

데이터로드

해당 애플리케이션은 Google 스프레드 시트 문서에서 데이터를 로드합니다. 데이터는 CSV 형식으로 제공되며 업데이트가 쉽습니다. 이를 검색하는 데 사용되는 코드는 다음과 같습니다.

// create the data source  
var view = new wijmo.collections.CollectionView();  
var url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vRVhwWiWkXp_dqlf8jOSEJlP5DFGTAFwqYJdOweZ4WGJlBsMrcFW_-48eZVCoXMHdNxqFv1CMQXGinq/pub?gid=351800917&single=true&output=csv';  
wijmo.httpRequest(url, {  
  success: function(xhr) {  
    view.sourceCollection = parseCsv(xhr.responseText);  
  }  
});  

이 코드는 CollectionView 를 만들고 CSV 데이터를 로드하도록 요청합니다. 데이터가 도착하면 코드는 데이터를 구문 분석하고 결과 데이터 배열을 CollectionView 의 sourceCollection 속성에 할당합니다 .

긴 URL에는 데이터가 포함된 특정 Google 스프레드시트 문서에 대한 참조가 포함됩니다. 이 시트는 Google 스프레드시트에서 만들어 CSV로 공유됩니다.

데이터를 그룹화하기 위해 간단한 JavaScript 배열 대신 CollectionView 를 사용했습니다.

그리드 만들기

데이터가 확보되면 그리드를 만들어 표시합니다.

그리드를 생성하고 초기화하는 코드는 다음과 같습니다.

// create and configure the grid  
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {  
  showAlternatingRows: false,  
  autoGenerateColumns: false,  
  headersVisibility: 'Column',  
  columns: [  
    { binding: 'region', header: 'Region', visible: false },  
    { binding: 'month', header: 'Period', format: 'MMM yyyy', width: '*' },  
    { binding: 'product', header: 'Product', width: '2*' },  
    { binding: 'units', header: 'Units Sold', width: '1.5*', format: 'n0' },  
    { binding: 'revenue', header: 'Revenue', width: '1.5*', format: 'n2' }  
  ],  
  itemsSource: view,  
  formatItem: showChart  
});  

위 코드의 주요 관심 사항은 다음과 같습니다.

1. autoGenerateColumns 속성을 false로 설정하여, 각 컬럼에 대해서 우리가 보여주고하는 것을, 각 열에 대한 속성을 포함하는 배열을 통해 설정합니다.
2. 열 너비는 star 단위로 지정하여, 전체 그리드 너비를 코드에 지정된 비율로 채웁니다.
3. itemsSource의 속성은 우리가 이전 단계에서 만든 CollectionView로 설정됩니다.
4. 이 코드는 핸들러를 formatItem 이벤트에 할당합니다 . 이 이벤트 핸들러는 이후 섹션에서 자세히 설명합니다.

그룹화 전환

앞서 데이터를 그룹화하기 위해, 일반 JavaScript 배열이 아닌 CollectionView를 사용할 것이라고 설명했습니다.

이를 수행하는 코드는 다음과 같습니다.

// show the groups now  
showGroups(true);  

// toggle grouping when the user clicks the grouping checkbox  
  document.getElementById('group').addEventListener('click', function(e) {  
    showGroups(e.target.checked);  
  });  

// toggle grouping  
function showGroups(show) {  
  view.sortDescriptions.clear();  
  view.groupDescriptions.clear();  
  if (show) {  
    let sd = view.sortDescriptions;  
    sd.push(new wijmo.collections.SortDescription('region', true));  
    sd.push(new wijmo.collections.SortDescription('month', false));  
    let gd = view.groupDescriptions;  
    gd.push(new wijmo.collections.PropertyGroupDescription('region'));  
  }  
}  

코드는 모든 정렬 및 그룹 설명(group descriptions)을 해제하는 것으로 시작합니다. 그룹화가 필요한 경우, 지역(region) 및 월(month)별로 데이터를 정렬하고, CollectionView의 sortDescriptions 및 groupDescriptions 배열에 항목을 추가하여 지역별로 그룹화 합니다.

차트 토글

일반 그리드를 정렬 가능하고 편집 가능한 차트로 바꾸는 코드는, 그리드의 formatItem 이벤트 처리기입니다.

// toggle charting when user clicks the checkbox  
document.getElementById('chart').addEventListener('click', function(e) {  
  theGrid.formatItem.removeHandler(showChart);  
  if (e.target.checked) {  
    theGrid.formatItem.addHandler(showChart);  
  }  
});  

// paint chart  
function showChart(s, e) {  
  if (e.panel == s.cells) {  
    var col = s.columns[e.col];  
    switch (col.binding) {  
      case 'units':  
      case 'revenue':  
        var bar = document.createElement('div'),  
            val = s.getCellData(e.row, e.col, false),  
            max = s.collectionView.getAggregate(wijmo.Aggregate.Max, col.binding);  
        wijmo.addClass(bar, 'spark-bar ' + col.binding);  
        bar.style.width = (val / max * 100) + '%';  
        e.cell.appendChild(bar);  
        break;  
    }  
  }  
}  

showChart 함수는 그리드의 formatItem이벤트를 다루고, 아래의 다음 작업을 수행합니다. 

1. 헤더가 아닌 일반 데이터 셀을 formatting하고 있는지 확인합니다.
2. 열이 차트로 표시 할 "unit(단위)"또는 "revenue(수익)"속성에 바인딩되어 있는지 확인합니다.
3. "div"요소를 작성하고, 셀 데이터를 사용하여 새 "div"를 형식화 한 후 셀에 추가합니다.

이 코드는 "spark-bar"스타일을 막대(bar) 요소에 추가합니다. 아래 코드는 CSS에서 막대 모양을 사용자 정의하는 데 사용됩니다.

.wj-flexgrid .wj-cell .spark-bar {  
  position: absolute;  
  opacity: 0.3;  
  top: 0;  
  left: 0;  
  bottom: 0;  
  border: 3px solid white;  
  border-radius: 0 8px 8px 0;  
}  
  .wj-flexgrid .wj-cell .spark-bar.units {  
    background: #0085c7;  
  }  
  .wj-flexgrid .wj-cell .spark-bar.revenue {  
    background: #3b9200;  
  }  

이제 차트가 보이게 되니다. 데이터를 정렬, 편집 또는 그룹화하면 차트가 자동으로 업데이트됩니다. 이것은 화면 공간을 낭비하지 않고, 그리드에 정보를 추가하는 좋은 방법입니다.