개요
대화형 원통형 차트입니다.
원통형 차트는 총 분산 위에 시가 및 종가를 오버레이하는 데 사용됩니다. 원통형 차트는 주가 행동을 보여주는 데 자주 사용됩니다. 이 차트에서 시가가 종가보다 적은 (이익) 항목은 채워진 상자로 그려지고, 시가가 종가보다 큰 (손실) 항목은 속이 빈 상자로 그려집니다.
예
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] // Treat first row as data as well. ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
폭포형 차트
적절한 옵션 집합을 사용하면 간단한 폭포형 차트와 유사한 원통형 차트를 만들 수 있습니다.
아래 코드에서는 첫 번째와 두 번째 열에 동일한 값을 포함하여 상단 심지를 삭제하고 세 번째와 네 번째 열에 동일한 값을 포함하여 하단 심지를 제거합니다. bar.groupWidth
를 '100%'
로 설정하여 막대 사이의 공간을 삭제합니다.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Mon', 28, 28, 38, 38], ['Tue', 38, 38, 55, 55], ['Wed', 55, 55, 77, 77], ['Thu', 77, 77, 66, 66], ['Fri', 66, 66, 22, 22] // Treat the first row as data. ], true); var options = { legend: 'none', bar: { groupWidth: '100%' }, // Remove space between bars. candlestick: { fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green } }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
현재 막대에 라벨을 쉽게 지정할 수 있는 방법은 없습니다. 가장 좋은 방법은 오버레이를 사용하는 것입니다.
로드
google.charts.load
패키지 이름은 "corechart"
입니다.
google.charts.load('current', {packages: ['corechart']});
시각화의 클래스 이름은 google.visualization.CandlestickChart.
입니다.
var visualization = new google.visualization.CandlestickChart(container);
데이터 형식
5개 이상의 열. 첫 번째 열은 X축 값 또는 그룹 라벨을 정의하고 그 이후에는 4개의 데이터 열의 배수로 각각 다른 계열을 정의합니다.
- Col 0: X축에 그룹 라벨로 사용되는 문자열(불연속) 또는 X축의 값으로 사용되는 숫자, 날짜, 날짜/시간, timeofday(연속)입니다.
- Col 1: 이 마커의 낮은 값 또는 최솟값을 지정하는 숫자입니다. 원통 중심선의 하단입니다. 열 라벨은 범례에서 계열 라벨로 사용되며 다른 열의 라벨은 무시됩니다.
- Col 2: 이 마커의 시작 값/초기 값을 지정하는 숫자입니다. 원통의 한쪽 세로 테두리가 됩니다. 열 3의 값보다 작은 경우 원통이 채워집니다. 그렇지 않으면 비어 있습니다.
- Col 3: 이 마커의 종가 또는 최종 값을 지정하는 숫자입니다. 이 값은 원통의 두 번째 세로 테두리입니다. 열 2의 값보다 작은 경우 빈 원통이 표시되고 그렇지 않으면 속이 채워진 원통입니다.
- Col 4: 이 마커의 높은 값 또는 최댓값을 지정하는 숫자입니다. 원통의 중앙선 상단입니다.
- Col 5 [선택사항]: 원통형에 대한 도움말 또는 스타일 열입니다.
구성 옵션
이름 | |
---|---|
aggregationTarget |
여러 데이터 선택 항목이 도움말로 롤업되는 방식:
aggregationTarget 는 selectionMode 및 tooltip.trigger 와 함께 사용되는 경우가 많습니다.예를 들면 다음과 같습니다.
var options = { // Allow multiple // simultaneous selections. selectionMode: 'multiple', // Trigger tooltips // on selections. tooltip: {trigger: 'selection'}, // Group selections // by x-value. aggregationTarget: 'category', }; 유형: 문자열
기본값: 'auto'
|
animation.duration |
애니메이션 재생 시간(밀리초)입니다. 자세한 내용은 애니메이션 문서를 참고하세요. 유형: 숫자
기본값: 0
|
animation.easing |
애니메이션에 적용된 이징 함수입니다. 사용할 수 있는 옵션은 다음과 같습니다.
유형: 문자열
기본값: 'linear'
|
animation.startup |
처음 그릴 때 차트에 애니메이션을 적용할지 여부를 결정합니다. 유형: 불리언
기본값 false
|
axisTitlesPosition |
차트 영역과 비교한 축 제목을 배치할 위치입니다. 지원되는 값:
유형: 문자열
기본값: 'out'
|
backgroundColor |
차트의 기본 영역의 배경 색상입니다. 간단한 HTML 색상 문자열(예: 유형: 문자열 또는 객체
기본값: 'white'
|
backgroundColor.stroke |
차트 테두리의 색상으로, HTML 색상 문자열로 지정됩니다. 유형: 문자열
기본값: '#666'
|
backgroundColor.strokeWidth |
테두리 너비(픽셀)입니다. 유형: 숫자
기본값: 0
|
backgroundColor.fill |
HTML 색상 문자열로 된 차트 채우기 색상입니다. 유형: 문자열
기본값: 'white'
|
bar.groupWidth |
다음 형식 중 하나로 지정된 원통형 그룹의 너비입니다.
유형: 숫자 또는 문자열
기본값: 황금 비율로, 약 '61.8%'입니다.
|
candlestick.hollowIsRising |
true이면 상승하는 초는 속이 빈 것으로 표시되고, 떨어지는 초는 꽉 채워진 것처럼 보입니다. 그렇지 않으면 반대가 됩니다. 유형: 불리언
기본값: false (나중에 true로 변경됨)
|
candlestick.fallingColor.fill |
떨어지는 초의 채우기 색상이며 HTML 색상 문자열로 표현됩니다. 유형: 문자열
기본값: auto (시리즈 색상 및 hollowIsRising에 따라 다름)
|
candlestick.fallingColor.stroke |
떨어지는 초의 획 색상으로, HTML 색상 문자열로 지정됩니다. 유형: 문자열
기본값: auto (시리즈 색상)
|
candlestick.fallingColor.strokeWidth |
떨어지는 초의 획 너비로, HTML 색상 문자열로 지정됩니다. 유형: 2
기본값: 숫자
|
candlestick.risingColor.fill |
상승하는 원통의 채우기 색상이며, HTML 색상 문자열로 지정됩니다. 유형: 문자열
기본값: 자동 (hollowIsRising에 따라 흰색 또는 시리즈 색상)
|
candlestick.risingColor.stroke |
상승하는 양초의 획 색상으로, HTML 색상 문자열로 지정됩니다. 유형: 문자열
기본값: 자동 (hollowIsRising에 따라 계열 색상 또는 흰색)
|
candlestick.risingColor.strokeWidth |
HTML 색상 문자열로 표시된 상승 초의 획 너비입니다. 유형: 숫자
기본값: 2
|
chartArea |
차트 영역의 위치와 크기를 구성하는 구성원이 포함된 객체입니다 (축과 범례를 제외하고 차트 자체가 그려지는 곳). 숫자 또는 숫자 뒤에 %가 오는
두 가지 형식이 지원됩니다. 단순한 숫자는 픽셀 단위 값이고 숫자 다음에 % 가 오는
백분율입니다. 예: 유형: 객체
기본값: null
|
chartArea.backgroundColor |
차트 영역 배경 색상입니다. 문자열이 사용되는 경우 16진수 문자열(예: '#fdc') 또는 영어 색상 이름입니다. 객체가 사용되면 다음 속성이 제공될 수 있습니다.
유형: 문자열 또는 객체
기본값: 'white'
|
chartArea.left |
왼쪽 테두리에서 차트를 그리는 거리입니다. 유형: 숫자 또는 문자열
기본값: auto
|
chartArea.top |
위쪽 테두리에서 차트를 그리는 거리입니다. 유형: 숫자 또는 문자열
기본값: auto
|
chartArea.width |
차트 영역 너비입니다. 유형: 숫자 또는 문자열
기본값: auto
|
chartArea.height |
차트 영역 높이 유형: 숫자 또는 문자열
기본값: auto
|
색상 |
차트 요소에 사용할 색상입니다. 문자열 배열로, 여기서 각 요소는 HTML 색상 문자열입니다(예: 유형: 문자열 배열
기본값: 기본 색상
|
enableInteractivity |
차트에서 사용자 기반 이벤트가 발생하는지 또는 사용자 상호작용에 반응하는지 여부입니다. false인 경우 차트에서 'select' 또는 기타 상호작용 기반 이벤트가 발생하지 않고 (준비됨 또는 오류 이벤트는 발생함) 사용자 입력에 따라 마우스 오버 텍스트를 표시하거나 달리 변경되지 않습니다. 유형: 불리언
기본값: true
|
focusTarget |
마우스를 가져가면 포커스를 받는 항목의 유형입니다. 마우스 클릭으로 선택되는 항목 및 이벤트와 연결되는 데이터 테이블 요소에도 영향을 줍니다. 다음 중 하나일 수 있습니다.
초점 대상 '카테고리'의 도움말에 모든 카테고리 값이 표시됩니다. 이 방법은 서로 다른 계열의 값을 비교하는 데 유용할 수 있습니다. 유형: 문자열
기본값: 'datum'
|
fontSize |
차트에 있는 모든 텍스트의 기본 글꼴 크기(픽셀)입니다. 특정 차트 요소의 속성을 사용하여 이를 재정의할 수 있습니다. 유형: 숫자
기본값: 자동
|
fontName |
차트에 있는 모든 텍스트의 기본 글꼴입니다. 특정 차트 요소의 속성을 사용하여 이를 재정의할 수 있습니다. 유형: 문자열
기본값: 'Arial'
|
forceIFrame |
인라인 프레임 안에 차트를 그립니다. IE8에서는 이 옵션이 무시되며 모든 IE8 차트가 i-프레임으로 그려집니다. 유형: 불리언
기본값: false
|
hAxis |
다양한 가로축 요소를 구성하는 구성원이 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. { title: 'Hello', titleTextStyle: { color: '#FF0000' } } 유형: 객체
기본값: null
|
hAxis.baseline |
가로축의 기준선입니다. 이 옵션은 유형: 숫자
기본값: 자동
|
hAxis.baselineColor |
가로축의 기준선 색상입니다. 모든 HTML 색상 문자열일 수 있습니다(예: 이 옵션은 유형: 숫자
기본값: 'black'
|
hAxis.direction |
가로축의 값이 증가하는 방향입니다. 값의 순서를 반대로 바꾸려면 유형: 1 또는 -1
기본값: 1
|
hAxis.format |
숫자 또는 날짜 축 라벨의 형식 문자열입니다.
숫자 축 라벨의 경우 십진수 형식 지정
ICU 패턴 집합
의 하위 집합입니다. 예를 들어
날짜 축 라벨의 경우 날짜 형식 지정
ICU 패턴 집합
의 하위 집합입니다. 예를 들어 라벨에 적용된 실제 형식 지정은 API가 로드된 언어에서 파생됩니다. 자세한 내용은 특정 언어로 차트 로드 를 참고하세요.
눈금 값과 격자선을 계산할 때 관련된 모든 격자선 옵션의 여러 대체 조합이 고려되며 형식이 지정된 눈금 라벨이 중복되거나 겹치는 경우 대체 항목이 거부됩니다.
따라서 정수 틱 값만 표시하려면
이 옵션은 유형: 문자열
기본값: auto
|
hAxis.gridlines |
가로축에 격자선을 구성하는 속성이 있는 객체입니다. 가로축 격자선은 세로로 그려집니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. {color: '#333', minSpacing: 20}
이 옵션은 유형: 객체
기본값: null
|
hAxis.gridlines.color |
차트 영역 내 가로 격자선의 색상입니다. 유효한 HTML 색상 문자열을 지정하세요. 유형: 문자열
기본값: '#CCC'
|
hAxis.gridlines.count |
차트 영역 내에 표시되는 가로 격자선의 대략적인 개수입니다.
유형: 숫자
기본값: -1
|
hAxis.gridlines.interval |
인접한 격자선 사이의 크기 배열 (픽셀이 아닌 데이터 값)입니다. 현재 이 옵션은 숫자 축에만 사용할 수 있지만 날짜 및 시간에만 사용되는 유형: 1에서 10 사이의 숫자(10 제외)
기본값: 계산된
|
hAxis.gridlines.minSpacing |
h축 주요 격자선 사이의 최소 화면 공간(픽셀)입니다.
주요 격자선의 기본값은 선형 배율의 경우 유형: 숫자
기본값: 계산된
|
hAxis.gridlines.multiple |
모든 격자선 및 눈금 값은 이 옵션 값의 배수여야 합니다. 간격과 달리 배수 10배의 거듭제곱은 고려되지 않습니다.
따라서 유형: 숫자
기본값: 1
|
hAxis.gridlines.units |
차트로 계산된 격자선과 함께 사용될 때 날짜/날짜/시간/timeofday 데이터 유형의 다양한 측면의 기본 형식을 재정의합니다. 연, 월, 일, 시간, 분, 초, 밀리초의 형식을 지정할 수 있습니다. 일반적인 형식은 다음과 같습니다. gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } 자세한 내용은 날짜 및 시간에서 확인할 수 있습니다. 유형: 객체
기본값: null
|
hAxis.minorGridlines |
hAxis.gridlines 옵션과 유사하게 가로축의 보조 격자선을 구성하는 구성원이 포함된 객체입니다.
이 옵션은 유형: 객체
기본값: null
|
hAxis.minorGridlines.color |
차트 영역 내에 있는 보조 격자선의 색상입니다. 유효한 HTML 색상 문자열을 지정하세요. 유형: 문자열
기본값: 격자선과 배경 색상의 혼합
|
hAxis.minorGridlines.interval |
minGridlines.interval 옵션은 주요 격자선 간격 옵션과 유사하지만 선택된 간격은 항상 주요 격자선 간격의 짝수 제수가 됩니다.
선형 스케일의 기본 간격은 유형: 숫자
기본값:1
|
hAxis.minorGridlines.minSpacing |
인접한 보조 격자선 사이, 보조 격자선과 주요 격자선 사이에 필요한 최소 공간(픽셀)입니다. 기본값은 선형 배율의 경우 주요 격자선의 최소 간격의 1/2, 로그 배율의 경우 최소 간격의 1/5입니다. 유형: 숫자
기본값:계산됨
|
hAxis.minorGridlines.multiple |
유형: 숫자
기본값: 1
|
hAxis.minorGridlines.count |
유형: 숫자
기본값:1
|
hAxis.minorGridlines.units |
차트로 계산된 MinGridlines와 함께 사용될 때 날짜/날짜/시간/timeofday 데이터 유형의 다양한 측면의 기본 형식을 재정의합니다. 연, 월, 일, 시간, 분, 초, 밀리초의 형식을 지정할 수 있습니다. 일반적인 형식은 다음과 같습니다. gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } 자세한 내용은 날짜 및 시간에서 확인할 수 있습니다. 유형: 객체
기본값: null
|
hAxis.logScale |
가로축을 로그 배율로 만드는 이 옵션은 유형: 불리언
기본값: false
|
hAxis.scaleType |
가로축을 대수 배율로 만드는
이 옵션은 유형: 문자열
기본값: null
|
hAxis.textPosition |
차트 영역을 기준으로 한 가로축 텍스트의 위치입니다. 지원되는 값: 'out', 'in', 'none'. 유형: 문자열
기본값: 'out'
|
hAxis.textStyle |
가로축 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.ticks |
자동으로 생성된 X축 눈금을 지정된 배열로 바꿉니다. 배열의 각 요소는 유효한 눈금 값 (예: 숫자, 날짜, 날짜/시간 또는 timeofday) 또는 객체여야 합니다. 객체인 경우 눈금 값에 관한
재정의할 예를 들면 다음과 같습니다.
이 옵션은 유형: 요소의 배열
기본값: auto
|
hAxis.title |
가로축의 제목을 지정하는 유형: 문자열
기본값: null
|
hAxis.titleTextStyle |
가로축 제목 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.allowContainerBoundaryTextCutoff |
false인 경우 차트 컨테이너에서 라벨을 자를 수 있도록 허용하지 않고 가장 바깥쪽에 있는 라벨을 숨깁니다. true인 경우 라벨 자르기를 허용합니다. 이 옵션은 유형: 불리언
기본값: false
|
hAxis.slantedText |
true인 경우 축을 따라 더 많은 텍스트가 들어가도록 가로축 텍스트를 비스듬하게 그리고 false이면 가로축 텍스트를 똑바로 그립니다. 수직으로 그릴 때 텍스트에 모두 맞을 수 없는 경우 기본 동작은 경사 텍스트입니다. 유형: 불리언
기본값: 자동
|
hAxis.slantedTextAngle |
비스듬하게 그려진 경우 가로축 텍스트의 각도입니다. 유형: 숫자, -90~90
기본값: 30
|
hAxis.maxAlternation |
가로축 텍스트의 최대 수준 수입니다. 축 텍스트 라벨이 너무 복잡하면 서버에서 라벨을 서로 더 가까이 맞추기 위해 주변 라벨을 위나 아래로 이동할 수 있습니다. 이 값은 사용할 레벨 수를 지정합니다. 라벨이 겹치지 않게 맞을 수 있는 경우 서버는 더 적은 레벨을 사용할 수 있습니다. 날짜 및 시간의 기본값은 1입니다. 유형: 숫자
기본값: 2
|
hAxis.maxTextLines |
텍스트 라벨에 허용되는 최대 행 수입니다. 라벨이 너무 길면 여러 줄에 걸쳐 있을 수 있으며 줄 수는 기본적으로 사용 가능한 공간의 높이에 따라 제한됩니다. 유형: 숫자
기본값: auto
|
hAxis.minTextSpacing |
인접한 두 텍스트 라벨 사이에 허용되는 최소 가로 간격(픽셀)입니다. 라벨의 간격이 너무 좁거나 너무 길면 간격이 이 임계값 아래로 떨어질 수 있으며, 이 경우 라벨 정리 조치 중 하나가 적용됩니다 (예: 라벨 자르기 또는 일부 삭제). 유형: 숫자
기본값:
hAxis.textStyle.fontSize 의 값 |
hAxis.showTextEvery |
표시할 가로축 라벨 수입니다. 여기서 1은 모든 라벨을, 2는 다른 모든 라벨을 표시하는 것을 의미합니다. 기본값은 겹치지 않고 가능한 한 많은 라벨을 표시하는 것입니다. 유형: 숫자
기본값: 자동
|
hAxis.maxValue |
가로축의 최댓값을 지정된 값으로 이동합니다. 대부분의 차트에서 오른쪽으로 이동합니다. 데이터의 최대 x값보다 작은 값으로 설정되면 무시됩니다.
이 옵션은 유형: 숫자
기본값: 자동
|
hAxis.minValue |
가로축의 최솟값을 지정된 값으로 이동합니다. 대부분의 차트에서 왼쪽에 배치됩니다. 데이터의 최소 x값보다 큰 값으로 설정되면 무시됩니다.
이 옵션은 유형: 숫자
기본값: 자동
|
hAxis.viewWindowMode |
차트 영역 내에서 값을 렌더링하기 위해 가로축의 배율을 조정하는 방법을 지정합니다. 다음과 같은 문자열 값이 지원됩니다.
이 옵션은 유형: 문자열
기본값: 'pretty'와 동일하지만
haxis.viewWindow.min 및 haxis.viewWindow.max 가 사용되는 경우 우선 적용됩니다.
|
hAxis.viewWindow |
가로축의 자르기 범위를 지정합니다. 유형: 객체
기본값: null
|
hAxis.viewWindow.max |
유형: 숫자
기본값: auto
|
hAxis.viewWindow.min |
유형: 숫자
기본값: auto
|
키 |
차트의 높이입니다(단위: 픽셀). 유형: 숫자
기본값: 포함하는 요소의 높이
|
범례 |
범례의 다양한 측면을 구성하는 구성원이 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. {position: 'top', textStyle: {color: 'blue', fontSize: 16}} 유형: 객체
기본값: null
|
legend.alignment |
범례의 정렬 다음 중 하나일 수 있습니다.
시작, 가운데, 끝은 범례의 스타일(세로 또는 가로)을 기준으로 합니다. 예를 들어 '오른쪽' 범례에서 '시작'과 '종료'는 각각 상단과 하단에 위치합니다. '상단' 범례의 경우 '시작'과 '종료'가 각각 영역의 왼쪽과 오른쪽에 있습니다. 기본값은 범례의 위치에 따라 다릅니다. '하단' 범례의 경우 기본값은 'center'이고 다른 범례의 기본값은 'start'입니다. 유형: 문자열
기본값: 자동
|
legend.maxLines |
범례의 최대 행 수 범례에 줄을 추가하려면 1보다 큰 숫자로 설정합니다. 참고: 렌더링된 실제 선 수를 결정하는 데 사용되는 정확한 로직은 여전히 변화합니다. 이 옵션은 현재 full.position이 'top'인 경우에만 작동합니다. 유형: 숫자
기본값: 1
|
legend.pageIndex |
범례의 0부터 시작하는 초기 페이지 색인입니다. 유형: 숫자
기본값: 0
|
legend.position |
범례의 위치입니다. 다음 중 하나일 수 있습니다.
유형: 문자열
기본값: 'right'
|
legend.textStyle |
범례 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
방향 |
차트의 방향입니다. 유형: 문자열
기본값: 'horizontal'
|
reverseCategories |
true로 설정하면 계열이 오른쪽에서 왼쪽으로 그려집니다. 기본값은 왼쪽에서 오른쪽으로 그리는 것입니다.
이 옵션은 유형: 불리언
기본값: false
|
selectionMode |
유형: 문자열
기본값: 'single'
|
시리즈 |
객체의 배열로, 각각 차트의 해당 계열 형식을 설명합니다. 계열에 기본값을 사용하려면 빈 객체 {}를 지정합니다. 계열 또는 값이 지정되지 않은 경우 전역 값이 사용됩니다. 각 객체는 다음과 같은 속성을 지원합니다.
지정된 순서대로 각각이 계열에 적용되는 객체의 배열을 지정하거나 각 하위 요소에 적용되는 계열을 나타내는 숫자 키가 있는 객체를 지정할 수 있습니다. 예를 들어 다음 두 선언은 동일하며, 첫 번째 계열을 범례에 표시되지 않는 검은색으로 선언하고 네 번째 계열을 빨간색으로(범례에 없음) 선언합니다. series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } 유형: 객체의 배열 또는 중첩된 객체가 있는 객체
기본값: {}
|
테마 |
테마는 특정 차트 동작이나 시각적 효과를 달성하기 위해 함께 작동하는 사전 정의된 옵션 값의 집합입니다. 현재 하나의 테마만 사용할 수 있습니다.
유형: 문자열
기본값: null
|
title |
차트 위에 표시할 텍스트입니다. 유형: 문자열
기본값: 제목 없음
|
titlePosition |
차트 영역과 비교하여 차트 제목을 배치할 위치입니다. 지원되는 값:
유형: 문자열
기본값: 'out'
|
titleTextStyle |
제목 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
도움말 |
다양한 도움말 요소를 구성하는 구성원이 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. {textStyle: {color: '#FF0000'}, showColorCode: true} 유형: 객체
기본값: null
|
tooltip.ignoreBounds |
참고: 이 내용은 HTML 도움말에만 적용됩니다. SVG 도움말로 이 기능을 사용 설정하면 차트 경계 외부의 오버플로가 잘립니다. 자세한 내용은 도움말 콘텐츠 맞춤설정을 참조하세요. 유형: 불리언
기본값: false
|
tooltip.isHtml |
true로 설정하면 SVG 렌더링이 아닌 HTML 렌더링 도움말을 사용합니다. 자세한 내용은 도움말 콘텐츠 맞춤설정을 참조하세요. 참고: 도움말 열 데이터 역할을 통한 HTML 도움말 콘텐츠의 맞춤설정은 풍선형 차트 시각화에서 지원되지 않습니다. 유형: 불리언
기본값: false
|
tooltip.showColorCode |
true인 경우 도움말에서 계열 정보 옆에 색상이 있는 정사각형을 표시합니다. 유형: 불리언
기본값: 자동
|
tooltip.textStyle |
도움말 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
도움말이 표시되도록 하는 사용자 상호작용입니다.
유형: 문자열
기본값: 'focus'
|
vAxes |
차트에 여러 개의 세로 축이 있는 경우 개별 세로 축의 속성을 지정합니다.
각 하위 객체는
여러 개의 세로축이 있는 차트를 지정하려면 먼저 { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } }
이 속성은 객체 또는 배열일 수 있습니다. 객체는 각각 정의하는 축을 지정하는 숫자 라벨이 있는 객체의 모음으로, 위에 표시된 형식입니다. 배열은 축당 하나씩 객체의 배열입니다. 예를 들어 다음 배열 스타일 표기법은 위에 표시된 vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] 유형: 객체의 배열 또는 하위 객체가 있는 객체
기본값: null
|
vAxis |
다양한 세로축 요소를 구성하는 구성원이 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. {title: 'Hello', titleTextStyle: {color: '#FF0000'}} 유형: 객체
기본값: null
|
vAxis.baseline |
세로축의 기준을 지정하는 유형: 숫자
기본값: 자동
|
vAxis.baselineColor |
세로축의 기준선 색상을 지정합니다. 모든 HTML 색상 문자열일 수 있습니다(예: 유형: 숫자
기본값: 'black'
|
vAxis.direction |
세로축의 값이 증가하는 방향입니다. 기본적으로 낮은 값은 차트 하단에 표시됩니다. 값의 순서를 반대로 바꾸려면 유형: 1 또는 -1
기본값: 1
|
vAxis.format |
숫자 축 라벨의 형식 문자열입니다.
ICU 패턴 집합
의 하위 집합입니다.
예를 들어
라벨에 적용된 실제 형식 지정은 API가 로드된 언어에서 파생됩니다. 자세한 내용은 특정 언어로 차트 로드 를 참고하세요.
눈금 값과 격자선을 계산할 때 관련된 모든 격자선 옵션의 여러 대체 조합이 고려되며 형식이 지정된 눈금 라벨이 중복되거나 겹치는 경우 대체 항목이 거부됩니다.
따라서 정수 틱 값만 표시하려면 유형: 문자열
기본값: auto
|
vAxis.gridlines |
세로축의 격자선을 구성하는 구성원이 포함된 객체입니다. 세로축 격자선은 가로로 그려집니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. {color: '#333', minSpacing: 20} 유형: 객체
기본값: null
|
vAxis.gridlines.color |
차트 영역 내 세로 격자선의 색상입니다. 유효한 HTML 색상 문자열을 지정하세요. 유형: 문자열
기본값: '#CCC'
|
vAxis.gridlines.count |
차트 영역 내에 표시되는 가로 격자선의 대략적인 개수입니다.
유형: 숫자
기본값: -1
|
vAxis.gridlines.interval |
인접한 격자선 사이의 크기 배열 (픽셀이 아닌 데이터 값)입니다. 현재 이 옵션은 숫자 축에만 사용할 수 있지만 날짜 및 시간에만 사용되는 유형: 1에서 10 사이의 숫자(10 제외)
기본값: 계산된
|
vAxis.gridlines.minSpacing |
h축 주요 격자선 사이의 최소 화면 공간(픽셀)입니다.
주요 격자선의 기본값은 선형 배율의 경우 유형: 숫자
기본값: 계산된
|
vAxis.gridlines.multiple |
모든 격자선 및 눈금 값은 이 옵션 값의 배수여야 합니다. 간격과 달리 배수 10배의 거듭제곱은 고려되지 않습니다.
따라서 유형: 숫자
기본값: 1
|
vAxis.gridlines.units |
차트로 계산된 격자선과 함께 사용될 때 날짜/날짜/시간/timeofday 데이터 유형의 다양한 측면의 기본 형식을 재정의합니다. 연, 월, 일, 시간, 분, 초, 밀리초의 형식을 지정할 수 있습니다. 일반적인 형식은 다음과 같습니다. gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } 자세한 내용은 날짜 및 시간에서 확인할 수 있습니다. 유형: 객체
기본값: null
|
vAxis.minorGridlines |
vAxis.gridlines 옵션과 유사하게 세로축의 보조 격자선을 구성하는 구성원이 포함된 객체입니다. 유형: 객체
기본값: null
|
vAxis.minorGridlines.color |
차트 영역 내에 있는 세로의 보조 격자선 색상입니다. 유효한 HTML 색상 문자열을 지정하세요. 유형: 문자열
기본값: 격자선과 배경 색상의 혼합
|
vAxis.minorGridlines.count |
MinGridlines.count 옵션은 개수를 0으로 설정하여 보조 격자선을 사용 중지하는 경우를 제외하고는 대부분 지원 중단되었습니다. 보조 격자선 수는 주요 격자선 (vAxis.gridlines.interval 참고)과 필요한 최소 공간(vAxis.minorGridlines.minSpacing 참고) 사이의 간격에 따라 다릅니다. 유형: 숫자
기본값: 1
|
vAxis.minorGridlines.interval |
minGridlines.interval 옵션은 주요 격자선 간격 옵션과 유사하지만 선택된 간격은 항상 주요 격자선 간격의 짝수 제수가 됩니다.
선형 스케일의 기본 간격은 유형: 숫자
기본값:1
|
vAxis.minorGridlines.minSpacing |
인접한 보조 격자선 사이, 보조 격자선과 주요 격자선 사이에 필요한 최소 공간(픽셀)입니다. 기본값은 선형 배율의 경우 주요 격자선의 최소 간격의 1/2, 로그 배율의 경우 최소 간격의 1/5입니다. 유형: 숫자
기본값:계산됨
|
vAxis.minorGridlines.multiple |
유형: 숫자
기본값: 1
|
vAxis.minorGridlines.units |
차트로 계산된 MinGridlines와 함께 사용될 때 날짜/날짜/시간/timeofday 데이터 유형의 다양한 측면의 기본 형식을 재정의합니다. 연, 월, 일, 시간, 분, 초, 밀리초의 형식을 지정할 수 있습니다. 일반적인 형식은 다음과 같습니다. gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } 자세한 내용은 날짜 및 시간에서 확인할 수 있습니다. 유형: 객체
기본값: null
|
vAxis.logScale |
true인 경우 세로축이 로그 배율이 됩니다. 참고: 모든 값은 양수여야 합니다. 유형: 불리언
기본값: false
|
vAxis.scaleType |
세로축을 로그 배율로 만드는
이 옵션은 유형: 문자열
기본값: null
|
vAxis.textPosition |
차트 영역을 기준으로 한 세로축 텍스트의 위치입니다. 지원되는 값: 'out', 'in', 'none'. 유형: 문자열
기본값: 'out'
|
vAxis.textStyle |
세로축 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
자동으로 생성된 Y축 눈금을 지정된 배열로 바꿉니다. 배열의 각 요소는 유효한 눈금 값 (예: 숫자, 날짜, 날짜/시간 또는 timeofday) 또는 객체여야 합니다. 객체인 경우 눈금 값에 관한
재정의할 예를 들면 다음과 같습니다.
유형: 요소의 배열
기본값: auto
|
vAxis.title |
세로축의 제목을 지정하는 유형: 문자열
기본값: 제목 없음
|
vAxis.titleTextStyle |
세로축 제목 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
유형: 객체
기본값:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
세로축의 최댓값을 지정된 값으로 이동합니다. 대부분의 차트에서 위쪽으로 이동합니다. 데이터의 최대 y값보다 작은 값으로 설정되면 무시됩니다.
유형: 숫자
기본값: 자동
|
vAxis.minValue |
세로축의 최솟값을 지정된 값으로 이동합니다. 대부분의 차트에서 아래쪽에 위치합니다. 데이터의 최소 y값보다 큰 값으로 설정되면 무시됩니다.
유형: 숫자
기본값: null
|
vAxis.viewWindowMode |
차트 영역 내에서 값을 렌더링하기 위해 세로축 배율을 조정하는 방법을 지정합니다. 다음과 같은 문자열 값이 지원됩니다.
유형: 문자열
기본값: 'pretty'와 동일하지만
vaxis.viewWindow.min 및 vaxis.viewWindow.max 가 사용되는 경우 우선 적용됩니다.
|
vAxis.viewWindow |
세로축의 자르기 범위를 지정합니다. 유형: 객체
기본값: null
|
vAxis.viewWindow.max |
렌더링할 최대 카테고리 데이터 값입니다.
유형: 숫자
기본값: auto
|
vAxis.viewWindow.min |
렌더링할 최소 카테고리 데이터 값입니다.
유형: 숫자
기본값: auto
|
너비 |
차트의 너비입니다(단위: 픽셀). 유형: 숫자
기본값: 포함하는 요소의 너비
|
메서드
메서드 | |
---|---|
draw(data, options) |
차트를 그립니다. 차트에서는 반환 유형: 없음
|
getAction(actionID) |
요청된 반환 유형: 객체
|
getBoundingBox(id) |
차트 요소
값은 차트의 컨테이너를 기준으로 합니다. 차트를 그린 후에 이 메서드를 호출합니다. 반환 유형: 객체
|
getChartAreaBoundingBox() |
차트 콘텐츠의 왼쪽, 상단, 너비, 높이를 포함하는 객체를 반환합니다(예: 라벨 및 범례 제외).
값은 차트의 컨테이너를 기준으로 합니다. 차트를 그린 후에 이 메서드를 호출합니다. 반환 유형: 객체
|
getChartLayoutInterface() |
차트 및 요소의 화면 배치에 관한 정보가 포함된 객체를 반환합니다. 반환된 객체에서 다음 메서드를 호출할 수 있습니다.
차트를 그린 후에 이 메서드를 호출합니다. 반환 유형: 객체
|
getHAxisValue(xPosition, optional_axis_index) |
차트 컨테이너의 왼쪽 가장자리로부터의 픽셀 오프셋인 예: 차트를 그린 후에 이 메서드를 호출합니다. 반환 유형: 숫자
|
getImageURI() |
이미지 URI로 직렬화된 차트를 반환합니다. 차트를 그린 후에 이 메서드를 호출합니다. PNG 차트 인쇄를 참조하세요. 반환 유형: 문자열
|
getSelection() |
선택된 차트 항목의 배열을 반환합니다.
선택 가능한 개체는 원통, 범례 항목, 카테고리입니다.
이 차트에서는 특정 시점에 하나의 항목만 선택할 수 있습니다.
반환 유형: 선택 요소의 배열
|
getVAxisValue(yPosition, optional_axis_index) |
예: 차트를 그린 후에 이 메서드를 호출합니다. 반환 유형: 숫자
|
getXLocation(dataValue, optional_axis_index) |
차트 컨테이너의 왼쪽 가장자리를 기준으로 예: 차트를 그린 후에 이 메서드를 호출합니다. 반환 유형: 숫자
|
getYLocation(dataValue, optional_axis_index) |
차트 컨테이너의 상단 가장자리를 기준으로 예: 차트를 그린 후에 이 메서드를 호출합니다. 반환 유형: 숫자
|
removeAction(actionID) |
요청된 반환 유형:
none |
setAction(action) |
사용자가 작업 텍스트를 클릭할 때 실행할 도움말 작업을 설정합니다.
차트의 반환 유형:
none |
setSelection() |
지정된 차트 항목을 선택합니다. 이전 선택을 취소합니다.
선택 가능한 개체는 원통, 범례 항목, 카테고리입니다.
이 차트에서는 한 번에 하나의 항목만 선택할 수 있습니다.
반환 유형: 없음
|
clearChart() |
차트를 지우고 할당된 리소스를 모두 해제합니다. 반환 유형: 없음
|
이벤트
이러한 이벤트를 사용하는 방법에 관한 자세한 내용은 기본 상호작용, 이벤트 처리, 이벤트 실행을 참고하세요.
이름 | |
---|---|
animationfinish |
전환 애니메이션이 완료되면 실행됩니다. 속성: 없음
|
click |
사용자가 차트 내부를 클릭하면 실행됩니다. 제목, 데이터 요소, 범례 항목, 축, 격자선, 라벨을 언제 클릭했는지 식별하는 데 사용할 수 있습니다. 속성: targetID
|
error |
차트를 렌더링하려고 시도할 때 오류가 발생하면 실행됩니다. 속성: ID, 메시지
|
legendpagination |
사용자가 범례 페이지로 나누기 화살표를 클릭하면 실행됩니다. 0을 기반으로 하는 현재의 범례 페이지 색인과 총 페이지 수를 전달합니다. 속성: currentPageIndex, totalPages
|
onmouseover |
사용자가 시각적 항목 위로 마우스를 가져가면 실행됩니다. 해당 데이터 테이블 요소의 행과 열 색인을 다시 전달합니다. 원통형은 데이터 테이블의 셀, 범례 항목은 열 (행 색인은 null), 범주는 행 (열 색인은 null)과 연관이 있습니다. 속성: 행, 열
|
onmouseout |
사용자가 시각적 항목에서 마우스 멀어질 때 실행됩니다. 해당 데이터 테이블 요소의 행과 열 색인을 다시 전달합니다. 원통형은 데이터 테이블의 셀, 범례 항목은 열 (행 색인은 null), 범주는 행 (열 색인은 null)과 연관이 있습니다. 속성: 행, 열
|
ready |
차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 속성: 없음
|
select |
사용자가 시각적 항목을 클릭하면 실행됩니다. 어떤 항목이 선택되었는지 알아보려면 속성: 없음
|
데이터 정책
브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.