시각화: 스파크라인 (이미지)

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

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

개요

Google 차트 API를 사용하여 이미지로 렌더링된 단일 또는 여러 스파크라인 이미지가 HTML 테이블에 포함되어 있습니다.

예

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
         ['Revenue', 'Licenses'],
         [435, 132],
         [438, 131],
         [512, 137],
         [460, 142],
         [491, 140],
         [487, 139],
         [552, 147],
         [511, 146],
         [505, 151],
         [509, 149]
        ]);

        var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div'));

        chart.draw(data, {width: 120, height: 40, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 120px; height: 40px;"></div>
  </body>
</html>

로드

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

  google.charts.load("current", {packages: ["imagesparkline"]});

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

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

데이터 형식

열 수 모든 열은 숫자여야 합니다. 각 열은 하나의 스파크라인으로 표시됩니다.

구성 옵션

이름 유형 기본값 설명
색상 문자열 모든 차트에 사용할 색상을 지정합니다. #rrggbb 형식의 문자열입니다. 예: '#00cc00' colors 옵션이 지정되지 않은 경우에만 사용됩니다.
색상 문자열 배열 기본 색상 데이터 열에 사용할 색상입니다. 각 요소가 #rrggbb 형식의 문자열인 문자열의 배열입니다. 예: '#00cc00' 색상 i는 데이터 열 i에 사용됩니다. 색상 수가 열 수보다 적으면 색상 선택이 래핑됩니다.
fill boolean false true인 경우 선 아래 영역을 색상으로 채웁니다.
키 숫자 컨테이너 높이 이미지의 높이(픽셀)입니다.
labelPosition 문자열 없음 라벨의 위치입니다. 지원되는 값은 '없음', '왼쪽', '오른쪽'입니다.
max 숫자 배열 각 스파크라인의 최대 데이터 값 각 스파크라인의 데이터 값 범위에서 가장 높은 값입니다. 배열의 색인은 DataTable의 열 색인과 일치해야 합니다. 모든 값이 null인 경우 계열의 최댓값이 됩니다.
분 숫자 배열 각 스파크라인의 최소 데이터 값 각 스파크라인의 데이터 값 범위에서 가장 낮은 값입니다. 배열의 색인은 DataTable의 열 색인과 일치해야 합니다. 모든 값이 null이면 계열의 최솟값이 됩니다.
showAxisLines boolean true true인 경우 축 선이 표시됩니다. false인 경우 유효하지 않으며 showValueLabels의 기본값은 false입니다.
showValueLabels boolean true를 반환합니다. true인 경우 값 축 라벨이 표시됩니다.
title 문자열 배열 표시할 제목이 없습니다. 각 스파크라인에 사용할 제목입니다.
너비 숫자 컨테이너 너비 차트의 너비입니다(단위: 픽셀).
레이아웃 문자열 'v' 세로 또는 가로 레이아웃: 세로의 경우 'v', 가로의 경우 'h'

메서드

메서드 반환 유형 설명
draw(data, options) 없음 차트를 그립니다.
getSelection() 선택 요소의 배열 선택한 차트의 색인을 객체의 배열로 반환합니다. 각 객체에는 선택한 스파크라인의 열 번호가 포함된 열 속성이 있습니다. 선택된 열을 2개 이상 반환할 수 있습니다.
setSelection(selection) 없음 지정된 스파크라인을 선택하고 지정되지 않은 스파크라인은 선택 해제합니다. select는 객체의 배열이며, 각 객체에는 선택된 스파크라인의 색인인 숫자 column 속성이 있습니다. 자세한 내용은 setSelection()를 참고하세요.

이벤트

이름 설명 속성
select 표준 선택 이벤트입니다. 없음

데이터 정책

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