계단식 차트
추가 데이터 세트의 드릴 다운 트리를 추가하기 위한 옵션으로 데이터 세트의 계단식 차트를 생성합니다. 서비스를 사용하여 데이터 세트를 채워야 합니다.
구성 특성
구성에서 보기의 모양 및 동작 특성을 설정하거나 수정하십시오.
- 화면 크기
- 특성 이름 옆에 화면 크기 아이콘
이 있는 구성 특성은 각 화면 크기에 대해 다른 값을 가질 수 있습니다. 값을 설정하지 않을 경우 화면 크기는 다음으로 큰 화면 크기 값을 기본값으로 상속합니다.
- 테마 정의
- 테마 정의는 보기를 위해 색상 및 스타일을 지정하고 보기의 모양을 결정합니다. 테마 편집기에서 보기의 룩앤필을 미리볼 수 있습니다. 테마를 참조하십시오.
제한사항: 접을 수 있는 패널에 차트를 표시할 때 크기 조정 문제점이 발생하는 경우, 접을 수 있는 패널의 On expand 이벤트에서 다음 코드를 사용하여 차트 크기를 사용 가능한 공간으로 조정하십시오.
${CHART_CONTROL_ID}.refresh();계단식 차트의 모양 구성 특성은 다음 표에 나와 있습니다.
| 모양 구성 특성 | 설명 | 데이터 유형 |
|---|---|---|
| 단계 아래 영역 표시 | 영역 차트 보기의 렌더링과 비슷하게 계단식 차트 아래 영역이 채워집니다. | Boolean |
| 배경색 스타일 | 배경색의 색상 스타일입니다. | String |
| 데이터 시리즈 색상 스타일 | 데이터 시리즈의 색상 스타일입니다. | String |
| 데이터 시리즈 사용자 정의 색상 스타일 | 데이터 시리즈의 색상 스타일을 사용자 정의하십시오. NameValuePair에서 Name은(는) 시리즈 이름이고 Value은(는) 이름, 16진 코드 또는 RGB 코드로 지정된 색상입니다. 예를 들어, red, #ff0000, rgb(255, 0, 0). 특성은 데이터 시리즈 색상 스타일보다 우선합니다. |
NameValuePair |
| 값 레이블 표시 | 차트의 각 점 위에 데이터 점 값을 표시합니다. | Boolean |
| 이동 경로 표시 | 이 옵션이 사용되는 경우 제목은 사용자가 드릴다운할 수 있는 트리의 현재 위치를 표시합니다(메뉴 선택사항에 따라). | Boolean |
| XY축 색상 스타일 | X 및 Y축의 색상 스타일입니다. | String |
| 눈금선 스타일 | 가로 눈금선의 스타일입니다. | String |
| X 레이블 회전 | X축 레이블의 회전 각도입니다. | Decimal |
| X축 높이 | X축의 높이입니다. | Integer |
| 테두리 반경 | 차트의 반지름입니다. | String |
| 채우기 | 차트의 오른쪽, 위, 왼쪽 및 아래에 대한 채우기(픽셀)입니다. | String |
높이![]() |
차트의 높이입니다. | Integer |
계단식 차트의 동작 구성 특성은 다음 표에 나와 있습니다.
차트에서 사용할 수 있는 드릴 다운 트리에 대한 정보는 드릴 다운 트리를 참조하십시오.
| 동작 구성 특성 | 설명 | 데이터 유형 |
|---|---|---|
| 차트 데이터 모드 | 서비스 또는 구성 옵션에서 차트 데이터를 채울지 여부를 선택하십시오. 사용자가 드릴다운할 수 있는 트리는 적절한 Ajax 액세스를 사용한 서비스 플로우를 통해 채워야만 사용 가능합니다. | String |
| 데이터 서비스 | 데이터 시리즈를 채우는 서비스입니다. | Service Flow |
| 데이터 시리즈 | seriesName은 데이터 시리즈의 이름이고 dataPoints는 데이터 시리즈에 포함할 데이터 점의 목록입니다. | seriesName 의 경우 String 이고 dataPoints목록의 경우 DataPoint[] 입니다. |
| 메뉴 사용 | 메뉴의 가시성을 사용 가능하게 합니다. 사용자가 드릴다운할 수 있는 트리가 있거나 메뉴를 추가한 경우 메뉴는 필수입니다. | Boolean |
| Y축 눈금 수 | Y축의 눈금 수. 지정한 값은 정확한 숫자로 해석되지 않지만 최적의 표시를 제공하는 데 가장 적합한 눈금 수로 조정됩니다. | Integer |
| Y축 눈금 정밀도 | Y축 값 레이블에 대해 표시할 소수 자릿수입니다. 기본 소수 자릿수는 0입니다. | Integer |
| 최소 Y축 값 | Y축의 최소값입니다. | Decimal |
| 최대 Y축 값 | Y축의 최대값입니다. | Decimal |
| X축 선택 사용 | 최대 X 눈금 수 특성의 값으로 결정되는 X축 데이터 눈금 수만 표시합니다. | Boolean |
| X축 틱 수 | X축에 있는 눈금 수. 지정한 값은 정확한 숫자로 해석되지 않지만 최적의 표시를 제공하는 데 가장 적합한 눈금 수로 조정됩니다. | Integer |
| 도구 팁 표시 | 이 옵션이 사용 가능하면 마우스를 사용하여 차트의 데이터 점 위에 마우스를 놓으면 도구 팁이 표시됩니다. 도구 팁은 점의 이름과 해당 값을 모두 표시합니다. | Boolean |
이벤트
이벤트 특성에서 보기에 대한 이벤트 핸들러를 설정하거나 수정하십시오. 사용자가 보기로 상호작용할 때 또는 프로그래밍 방식으로 트리거되도록 이벤트를 설정할 수 있습니다. 이벤트를 정의하고 코딩하는 방법에 대한 정보는 사용자 정의 이벤트를 참조하십시오.계단식 차트에는 다음 유형의 이벤트 핸들러가 있습니다.
- On load: 차트가 로드될 때 활성화됩니다. 예를 들어, 다음과 같습니다.
me.defocusSeries("Brand1") - On refreshed: 차트를 새로 고칠 때 활성화됩니다. 예를 들어, 다음과 같습니다.
me.focusSeries("Brand1") - On click: 차트를 클릭하면 활성화됩니다. 예를 들어, 다음과 같습니다.
me.transform("donut", ["Brand1","Brand2"]) - On menu action: 메뉴 조치가 발견되면 활성화됩니다. 예를 들어, 다음과 같습니다.
console.log("Running menu action '" + action.name + "' on " + me.getSelectedDataPoint().label + " with value of " + me.getSelectedDataPoint().value)
메소드
계단식 차트의 사용 가능한 메소드에 대한 자세한 정보는 계단식 차트 JavaScript API 를 참조하십시오.
추가 자원
Coach 또는 페이지를 작성하는 방법에 대한 정보는 Coach 빌드를 참조하십시오.
표준 특성 (일반, 구성, 위치 지정, 가시성및 HTML 속성) 에 대한 정보는 특성 보기를 참조하십시오.