이 페이지는 Cloud Translation API를 통해 번역되었습니다.

원통형 이미지 차트

중요: Google 차트 도구의 이미지 차트 부분은 2012년 4월 20일부로 공식적으로 지원 중단되었습니다. Google의 지원 중단 정책에 따라 계속 작동합니다.

개요
예
로드
데이터 형식
구성 옵션
메서드
이벤트
데이터 정책

개요

Google 차트 API를 사용하여 이미지로 렌더링되는 원통형 차트

원통형 차트는 시가 및 종가를 전체 분산 위에 오버레이로 표시하는 데 사용합니다. 원통형 차트는 주가 가치를 표시하는 데 자주 사용됩니다. 이 차트에서 시가가 종가보다 적은 항목은 초록색으로 그려지며 시가가 종가보다 큰 항목은 빨간색으로 그려집니다. 자세한 내용은 Google 차트 API의 원통형 문서를 참고하세요.

예

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var options = {};
        dataTable = google.visualization.arrayToDataTable([
          ['Gainers',10,30,45,60],
          ['Losers',20,35,25,45],
          ], true);

       var chart = new google.visualization.ImageCandlestickChart(document.getElementById('chart_div'));
       chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

로드 중

google.charts.load 패키지 이름은 "imagechart"입니다.

  google.charts.load('current', {packages: [imagechart]});

시각화의 클래스 이름은 google.visualization.ImageCandlestickChart입니다.

  var visualization = new google.visualization.ImageCandlestickChart(container);

데이터 형식

열 5개(각 행은 하나의 원통형 마커를 설명함):

Col 0: X축에서 이 마커의 라벨로 사용되는 문자열입니다.
열 1: 이 마커의 낮은 값 또는 최소값을 지정하는 숫자입니다. 검은색 선의 밑부분이 됩니다.
열 2: 이 마커의 시가/초기 값을 지정하는 숫자입니다. 이 값은 원통의 한쪽 세로 테두리가 됩니다. 열 3에 있는 값보다 작으면 초는 녹색이고, 그렇지 않으면 빨간색입니다.
열 3: 이 마커의 닫는/최종 값을 지정하는 숫자입니다. 이 값은 원통의 두 번째 세로 테두리가 됩니다. 열 2에 있는 값보다 작으면 초는 빨간색이 되고, 그렇지 않으면 녹색이 됩니다.
Col 4: 이 마커의 높은 값/최댓값을 지정하는 숫자입니다. 검은색 선의 상단입니다.

구성 옵션

일반 이미지 차트에서 지원되는 옵션 외에도 원통형 차트에서는 다음 옵션을 지원합니다.

이름	유형	기본	설명
backgroundColor	문자열	'#FFFFFF'(흰색)	차트의 배경 색상입니다. # 마크를 포함한 # RRGGBB 문자열입니다.
ShowAxisLines	boolean	true	축 선 표시 여부입니다. false로 설정하면 축 라벨도 표시되지 않습니다.
높이	숫자	포함 요소의 높이	차트의 높이(픽셀)입니다. 30 < height 또는 height > 1,000인 경우의 기본값은 200입니다.
max	숫자	최대 데이터 값	최대 Y축 값입니다.
min	숫자	최소 데이터 값	최소 Y축 값입니다.
프로그램 카테고리 라벨	boolean	true	false인 경우 X축 라벨을 숨깁니다.
항목 값 표시	boolean	true	false인 경우 Y축 라벨을 숨깁니다.
내부 표시 값 라벨	숫자	자동	Y축 라벨 사이의 간격(픽셀)입니다.
title	문자열	''	차트 위에 표시할 텍스트입니다.
너비	숫자	포함 요소의 너비	차트의 너비(픽셀)입니다. 너비가 30보다 작거나 1,000보다 크면 너비가 300으로 설정됩니다.

방법

메서드	반환 유형	설명
`draw(data, options)`	없음	차트를 그립니다.

이벤트

등록하여 일반 이미지 차트 페이지에 설명된 이벤트를 들을 수 있습니다.

데이터 정책

Chart API 로깅 정책을 참고하세요.