• 검색

JavaScript DataGrid에 Sparkline Columns를 쉽게 추가 할 수있는 방법을 추가했습니다. 스파크라인은 계절적 증가 또는 감소, 경제주기와 같은 일련의 값으로 추세를 표시하거나 최대값과 최소값을 강조하는 데 사용되는 작은 차트입니다. 스파크라인은 Excel에서 사용할 수 있으며 이제 FlexGrid에서도 사용할 수 있습니다.

마지막 릴리스에서는 cellTemplate 속성을 FlexGrid의 Column 클래스에 추가했습니다. 이 속성을 통해 개발자는 템플릿 리터럴을 사용하여 셀에 대한 사용자 정의 컨텐츠를 정의할 수 있으며, 이는 많은 유연성을 제공합니다.

대부분의 경우 cellTemplate은 formatItem 이벤트보다 간단하고 사용하기 쉽습니다. 그러나 고객들 중 일부는 훨씬 더 관리하기 쉬운 것을 원했습니다.

그래서 GrapeCity 개발팀은 CellMaker라고 불리는 새로운 모듈을 구축하기 위해 cellTemplate 속성을 활용하기로 결정하였습니다. CellMaker의 모듈은 스파크라인을 포함해 간단하고 유용한 여러가지 셀을 작성하는 방법을 제공합니다.

CellMaker를 사용하여 SparkGrid 열을 FlexGrid에 추가하는 방법을 살펴 보겠습니다.

스파크라인 열을 만들기 위해 다음과 같이 CellMaker 클래스를 사용합니다.

import { FlexGrid, ICellTemplateContext } from '@grapecity/wijmo.grid';  
 import {  
     CellMaker, SparklineType, SparklineMarkers  
 } from '@grapecity/wijmo.grid.cellmaker';  

 let theGrid = new FlexGrid('#theGrid', {  
     showMarquee: true,  
     autoGenerateColumns: false,  
     columns: [  

         // spark lines: column  
         {  
             binding: 'history',  
             header: 'Sparklines: Column',  
             width: 175,  
             cellTemplate: CellMaker.makeSparkline({  
                 type: SparklineType.Column,  
                 markers: SparklineMarkers.High | SparklineMarkers.Low,  
                 label: '${item.country} sales history column chart'  
             })  
         }  
     ]  
 });

이 코드는 열의 cellTemplate 속성을 CellMaker의 makeSparkline 메서드에서 제공하는 ICellTemplateFunction으로 설정합니다.

makeSparkline 메서드는 열 바인딩을 통해 차트 데이터를 얻습니다. 스파크라인 유형(선, 열 또는 승/패) 및 표시하려는 마커를 선택할 수 있습니다. 접근성을 향상시키려면 label 식도 포함해야 합니다.

결과는 다음과 같습니다.

스파크라인의 모양은 CSS를 사용하여 사용자 정의할 수 있습니다.

FlexGrid 스파크 라인 열 데모 :

• FlexGrid 스파크라인 열 JavaScript 데모
• FlexGrid 스파크라인 열 Angular 데모
• FlexGrid 스파크라인 열 React 데모
• FlexGrid 스파크라인 열 Vue 데모