원통 이미지 차트

중요: Google Chart Tools의 이미지 차트 부분은 2012년 4월 20일부로 공식적으로 지원 중단되었습니다. Google의 지원 중단 정책에 따라 계속 사용할 수 있습니다.

  1. 개요
  2. 예
  3. 로드 중
  4. 데이터 형식
  5. 구성 옵션
  6. 메서드
  7. 이벤트
  8. 데이터 정책

개요

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

원통형 차트는 총 분산 위에 시가 및 종가를 오버레이하는 데 사용됩니다. 원통형 차트는 주가 행동을 보여주는 데 자주 사용됩니다. 이 차트에서 시가가 종가보다 적은 항목은 녹색으로, 시가가 종가보다 큰 항목은 빨간색으로 그려집니다. 자세한 내용은 Google Charts 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축에서 이 마커의 라벨로 사용되는 문자열입니다.
  • Col 1: 이 마커의 낮은 값 또는 최솟값을 지정하는 숫자입니다. 검은색 선의 밑바닥입니다.
  • Col 2: 이 마커의 시작 값/초기 값을 지정하는 숫자입니다. 원통의 한쪽 세로 테두리가 됩니다. 열 3의 값보다 작은 경우 녹색 원통이 표시되고 그렇지 않으면 빨간색이 표시됩니다.
  • Col 3: 이 마커의 종가 또는 최종 값을 지정하는 숫자입니다. 이 값은 원통의 두 번째 세로 테두리입니다. 열 2의 값보다 작은 경우 원통이 빨간색으로 표시되고 그렇지 않으면 녹색으로 표시됩니다.
  • Col 4: 이 마커의 높은 값 또는 최댓값을 지정하는 숫자입니다. 검은색 선의 상단입니다.

구성 옵션

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

이름 유형 기본값 설명
backgroundColor 문자열 '#FFFFFF' (흰색) 차트의 배경 색상입니다. 이는 #기호를 포함한 # RRGGBB 문자열입니다.
showAxisLines boolean true 축 선을 표시할지 선택합니다. false로 설정하면 축 라벨도 표시되지 않습니다.
키 숫자 포함하는 요소의 높이 차트의 높이입니다(단위: 픽셀). 30 < 높이 또는 높이 > 1,000인 경우 이 값은 기본적으로 200으로 설정됩니다.
max 숫자 최대 데이터 값 최대 Y축 값입니다.
분 숫자 최소 데이터 값 최소 Y축 값입니다.
showCategoryLabels boolean true false인 경우 X축 라벨을 숨깁니다.
showValueLabels boolean true false인 경우 Y축 라벨을 숨깁니다.
showValueLabelsInternal 숫자 자동 Y축 라벨 사이의 간격(픽셀)입니다.
title 문자열 '' 차트 위에 표시할 텍스트입니다.
너비 숫자 포함하는 요소의 너비 차트의 너비입니다(단위: 픽셀). width가 30보다 작거나 1,000보다 크면 width는 300으로 설정됩니다.

메서드

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

이벤트

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

데이터 정책

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