[]
        
(Showing Draft Content)

FlexGrid에서 CellMaker을 사용한 스파크라인

Wijmo 에는 JavaScript 데이터그리드에 스파크라인 열을 추가하는 쉬운 방법이 있습니다. 스파크라인은 계절적 증가 또는 감소, 경제 주기와 같은 일련의 값의 추세를 표시하거나 최대값 및 최소값을 강조하는 데 사용되는 작은 차트입니다. 스파크라인은 Excel 뿐만 아니라, 이제는 FlexGrid에서도 사용할 수 있습니다.

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

대부분 cellTemplate은 formatItem 이벤트보다 더 간단하고 사용하기 쉽습니다. 그러나 일부 고객은 훨씬 더 관리하기 쉬운 것을 원했기 때문에, 버튼 및 하이퍼링크와 같은 일반적인 간단한 셀만 만들기를 원했다면 HTML을 작성할 필요가 없었을 것입니다.

cellTemplate 속성을 활용하여 CellMaker라는 모듈을 빌드합니다. CellMaker 모듈은 스파크라인을 포함하여, 여러 유형의 간단하고 유용한 셀 생성 메서드를 제공합니다.

CellMaker를 사용하여 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 메서드에서 제공하는 ICellTemplate 함수로 설정합니다.

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

결과는 다음과 같습니다.

Sparklines in JavaScript DataGrid

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