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

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

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

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

개요

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	문자열	없음	라벨의 위치입니다. 지원되는 값은 'none', 'left', 'right'입니다.
max	숫자 배열	각 스파크라인의 최대 데이터 값	각 스파크라인의 데이터 값 범위에서 가장 높은 값입니다. 배열의 색인은 DataTable의 열 색인과 일치해야 합니다. 모든 값이 null인 경우 계열의 최댓값입니다.
min	숫자 배열	각 스파크라인의 최소 데이터 값	각 스파크라인의 데이터 값 범위의 최솟값입니다. 배열의 색인은 DataTable의 열 색인과 일치해야 합니다. 모든 값이 null인 경우 계열의 최솟값이 됩니다.
ShowAxisLines	boolean	true	true인 경우 축 선이 표시됩니다. false인 경우 그렇지 않고 ShowValueLabel의 기본값은 false입니다.
항목 값 표시	boolean	true(showAxisLines가 false인 경우 제외)	true인 경우 값 축 라벨이 표시됩니다.
title	문자열 배열	제목이 표시되지 않습니다.	각 스파크라인에 사용할 제목
너비	숫자	컨테이너 너비	차트의 너비(픽셀)입니다.
레이아웃	문자열	'v'	세로 또는 가로 레이아웃: 세로의 경우 'v', 가로의 경우 'h'입니다.

방법

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

이벤트

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

데이터 정책

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