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