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

시각화: 선 차트 (이미지)

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

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

개요

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:["imagelinechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

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

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

로드 중

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

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

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

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

데이터 형식

첫 번째 열은 문자열이어야 하며 카테고리 라벨을 포함해야 합니다. 다음에 오는 열의 수에는 제한이 없으며 모두 숫자여야 합니다. 각 열은 별도의 줄로 표시됩니다.

구성 옵션

이름	유형	기본	설명
backgroundColor	문자열	'#FFFFFF'(흰색)	Chart API 색상 형식으로 차트의 배경 색상입니다.
색상	배열<string>	Auto	각 데이터 계열에 특정 색상을 할당하려면 이 속성을 사용합니다. 색상은 Chart API 색상 형식으로 지정됩니다. 색상 i는 데이터 열 i에 사용되며, 색상보다 데이터 열이 많은 경우 처음으로 래핑됩니다. 모든 계열에 단일 색상 변형이 허용되는 경우 `color` 옵션을 대신 사용하세요.
이벤트 사용 설정	boolean	false	차트에서 클릭 또는 마우스오버와 같은 사용자 트리거 이벤트를 발생시킵니다. 특정 차트 유형에만 지원됩니다. 아래의 이벤트를 참고하세요.
높이	숫자	컨테이너 높이	차트의 높이(픽셀)입니다.
전설	문자열	'오른쪽'	범례의 위치 및 유형 상태는 다음 중 하나일 수 있습니다. 'right' - 차트의 오른쪽에 위치 '왼쪽' - 차트의 왼쪽 'top' - 차트 위입니다. 'bottom' - 차트 하단 'none' - 범례가 표시되지 않습니다.
max	숫자	자동 사전 처리와	Y축에 표시되는 최댓값입니다.
min	숫자	자동 사전 처리와	Y축에 표시되는 최솟값입니다.
ShowAxisLines	boolean	true	false로 설정하면 축 선과 라벨이 삭제됩니다.
프로그램 카테고리 라벨	boolean	ShowAxisLines와 동일	false로 설정하면 카테고리의 라벨 (X축 라벨)이 삭제됩니다.
항목 값 표시	boolean	ShowAxisLines와 동일	false로 설정하면 값의 라벨 (Y축 라벨)이 삭제됩니다.
title	문자열	제목 없음	차트 위에 표시할 텍스트입니다.
valueLabelInterval	숫자	Auto	값 축 라벨을 표시할 간격입니다. 예를 들어 `min`이 0, `max`이 100, `valueLabelsInterval`이 20이면 차트는 (0, 20, 40, 60, 80 100)의 축 라벨을 표시합니다.
너비	숫자	컨테이너 너비	차트의 너비(픽셀)입니다.

방법

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

이벤트

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

데이터 정책

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