Class: DataGridSparkColumn

DataGridSparkColumn

new DataGridSparkColumn()

DataGrid의 컬럼표시 내용을 설명하는 클래스로 셀에 스파크 차트를 표시하는 기능을 가지고 있습니다.

(DataGridSparkColumn으로 구성된 컬럼은 html5 canvas가 지원되지 않는 브라우저(ie 8 이하)에서는 표시되지 않으며, 엑셀 Export시 지원되지 않아 빈칸으로 처리됩니다)

See:
Example

레이아웃은 다음과 같은 형식으로 작성됩니다.

<rMateGrid>
     <NumberFormatter id="numfmt" useThousandsSeparator="true"/>
     <DataGrid id="dg1" horizontalScrollPolicy="auto" verticalAlign="middle" selectionMode="multipleRows" textAlign="center">
         <columns>
             <DataGridColumn dataField="CodeName" width="150"/>
             <DataGridSparkColumn dataFields="Y2004,Y2005,Y2006,Y2007,Y2008,Y2009,Y2010,Y2011,Y2012,Y2013,Y2014" width="130
              " headerText="Spark Column" itemRenderer="SparkColumn" showDataTips="true" showFirstPoint="true" showLastPoint="true"
              showMaxPoint="true" showMinPoint="true" showMinusPoints="true" showZeroAxis="true"/>
                 ...
                 ...
         </columns>
     </DataGrid>
 </rMateGrid>

Members

columnWidthRationumber

렌더러로 SparkColumn 사용시 컬럼이 그려질 영역의 비율.

Default Value:
  • 0.7
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getColumnWidthRatio(), setColumnWidthRatio(value)

dataFieldsstring

차트에 그려질 데이터 필드명들.

필드명들은 데이터에 들어있는 필드명들을 “,”로 연결하여 넣도록 합니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getDataFields(), setDataFields(value)

dataTipJsFunctionfunction

셀에서 표시할 데이터팁 라벨의 콜백함수.

이는 데이터팁 내용을 자바스크립트로 조작할 수 있게 합니다.

See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getDataTipFunction(), setDataTipFunction(value)
Example

dataTipJsFunction 함수의 파라메터는 다음과 같습니다.

function dataTipJsFunction(item, values, column)
  - item : 해당 행의 data 객체
  - values : 해당 셀의 값들(배열)
  - column : 해당 셀의 컬럼을 정의한 Column 객체

horizontalAxisInvertboolean

가로 축 값을 반대방향으로 출력할 지 여부입니다.

Default Value:
  • false
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getHorizontalAxisInvert(), setHorizontalAxisInvert(value)

radiusnumber

렌더러로 SparkLine 사용시 라인위에 그려지는 점의 반지름.

Default Value:
  • 2
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getRadius(), setRadius(value)

showAllPointsboolean

렌더러로 SparkLine 사용시 라인위의 모든 지점에 점을 표시할지 여부.

Default Value:
  • false
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getShowAllPoints(), setShowAllPoints(value)

showFirstPointboolean

첫번째 지점에 점 또는 색을 표시할지 여부.

Default Value:
  • false
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getShowFirstPoint(), setShowFirstPoint(value)

showLastPointboolean

마지막 지점에 점 또는 색을 표시할지 여부.

Default Value:
  • false
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getShowLastPoint(), setShowLastPoint(value)

showMaxPointboolean

높은 지점에 점 또는 색을 표시할지 여부.

Default Value:
  • false
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getShowMaxPoint(), setShowMaxPoint(value)

showMinPointboolean

낮은 지점에 점 또는 색을 표시할지 여부.

Default Value:
  • false
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getShowMinPoint(), setShowMinPoint(value)

showMinusPointboolean

음수 지점에 점 또는 색을 표시할지 여부.

Default Value:
  • false
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getShowMinusPoint(), setShowMinusPoint(value)

showZeroAxisboolean

축을 표시할지 여부.

Default Value:
  • false
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getShowZeroAxis(), setShowZeroAxis(value)

verticalAxisMaximumboolean

세로 축 최대값.

Default Value:
  • NaN
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getVerticalAxisMaximum(), setVerticalAxisMaximum(value)

verticalAxisMinimumboolean

세로 축 최소값.

Default Value:
  • NaN
See:
  • 자바스크립트에서 사용할 때는 getter, setter함수를 사용합니다. - getVerticalAxisMinimum(), setVerticalAxisMinimum(value)

Methods

clearStyle(styleProp)

컴포넌트에 등록되어 있는 스타일을 지웁니다.

Name Type Description
styleProp string

스타일 속성명

getStyle(styleProp)

컴포넌트에 등록되어 있는 스타일을 반환합니다.

스타일에 등록되어 있는 값, 없을시 null값을 리턴합니다.

Name Type Description
styleProp string

스타일 속성명

setStyle(styleProp, newValue)

컴포넌트에 스타일을 등록합니다.

Name Type Description
styleProp string

스타일 속성명

newValue *

스타일에 등록할 값

Styles

backgroundColorcolor

배경색을 나타냅니다.

colorcolor

텍스트의 색깔을 나타냅니다.

fillcolor

컬럼바의 채우기 색

Default Value:
  • #333333

firstPointFillcolor

첫번째 컬럼바의 채우기 색

Default Value:
  • #FFA017

firstPointStrokecolor

첫번째 컬럼바의 테두리 색

Default Value:
  • #FFA017

fontFamilystring

사용할 폰트를 지정합니다.

fontSizestring

폰트 크기를 픽셀단위로 지정합니다.

fontStylestring

폰트 스타일을 나타냅니다.

(유효값 : “normal”,”italic”)

Default Value:
  • "normal"

fontWeightstring

폰트의 두께 속성을 나타냅니다.

(유효값 : “normal”,”bold”)

Default Value:
  • "normal"

headerStyleNamestring

컬럼 헤더의 스타일 이름을 나타냅니다.

lastPointFillcolor

마지막 컬럼바의 채우기 색

Default Value:
  • #2A9EF4

lastPointStrokecolor

마지막 컬럼바의 테두리 색

Default Value:
  • #2A9EF4

maxPointFillcolor

높은 점 컬럼바의 채우기 색

Default Value:
  • #00B1BA

maxPointStrokecolor

높은 점 컬럼바의 테두리 색

Default Value:
  • #00B1BA

minPointFillcolor

낮은 점 컬럼바의 채우기 색

Default Value:
  • #FF3E3E

minPointStrokecolor

낮은 점 컬럼바의 테두리 색

Default Value:
  • #FF3E3E

minusPointsFillcolor

음수 점 컬럼바의 채우기 색

Default Value:
  • #FF7C33

minusPointsStrokecolor

음수 점 컬럼바의 테두리 색

Default Value:
  • #FF7C33

paddingLeftstring

왼쪽 여백을 나타냅니다.

Default Value:
  • 8px

paddingRightstring

오른쪽 여백을 나타냅니다.

Default Value:
  • 8px

strokecolor

기본 라인 또는 바의 색

Default Value:
  • #333333

strokeWidthnumber

라인의 또는 컬럼바의 테두리 두께

SparkLine 렌더러를 사용할 경우 기본값은 1이 되며, 나머지 SparkColumn과 SparkWinLoass 렌더러를 사용시 0이면 테두리를 표시하지 않습니다.

Default Value:
  • 0

zeroAxisStrokecolor

축 라인의 색

Default Value:
  • #222222

zeroAxisStrokeWidthnumber

축 라인의 두께

Default Value:
  • 1