시각화: 일반 이미지 차트

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

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

개요

일반 이미지 차트는 Google 차트 API에서 생성된 모든 차트의 일반 래퍼입니다. 이 시각화를 사용하려면 Chart API 문서를 읽어 보세요. Chart API 직접 호출의 2K 제한과 달리 이 시각화를 사용하여 최대 16K의 데이터를 전송할 수 있습니다.

모든 데이터는 DataTable 또는 DataView를 사용하여 차트에 전달됩니다. 또한 일부 라벨은 데이터 테이블에서 열로 전달됩니다.

다른 모든 Chart API URL 매개변수 (chd 제외)는 옵션으로 전달됩니다.

작성자: Google

예

다음은 몇 가지 다른 유형의 차트 예입니다.

선 차트

<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"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addColumn('string');

        // Row data is [chl, data point, point label]
        dataTable.addRows([
        ['January',40,undefined],
        ['February',60,'Initial recall'],
        ['March',60,'Product withdrawn'],
        ['April',45,undefined],
        ['May',47,'Relaunch'],
        ['June',75,undefined],
        ['July',70,undefined],
        ['August',72,undefined]
        ]);

        var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};

        var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='line_div'></div>
  </body>
</html>

세로 막대 그래프

래핑된 막대 그래프에서는 차트를 직접 호출하는 경우와 같이 chxt='x'를 지정할 필요가 없습니다. 축을 지정하지 않으면 일반 이미지 차트가 기본적으로 차트를 올바르게 설정하려고 시도합니다.

<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"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
          chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};

        var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='bar_div'></div>
  </body>
</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:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['January',12],
          ['February',8],
          ['March',3]
        ]);

        var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
          colors:['#3399CC','#00FF00','#0000FF']};

        var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='pie_div'></div>
  </body>
</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:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</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:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['DZ',0],
          ['EG',50],
          ['MG',50],
          ['GM',35],
          ['KE',100],
          ['ZA',100]
        ]);

        var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
        var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
<body>
    <div id='map_div'></div>
</body>
</html>

로드

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

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

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

  var visualization = new google.visualization.ImageChart(container_div);

데이터 형식

일반화된 데이터 형식에는 지도 차트용과 기타 모든 차트용, 이렇게 두 가지가 있습니다. 데이터에 지원되는 유일한 숫자 형식은 JavaScript 숫자 유형입니다.

참고 데이터 또는 옵션으로 전달된 문자열 값을 URL 인코딩해서는 안 됩니다.

지도 차트

지도 차트는 두 개의 필수 열이 있는 데이터 표를 사용합니다.

자세한 내용은 지도 차트 문서를 참고하세요.

지도 외 차트

맵이 아닌 차트는 선택적인 열 두 개 (처음에 하나, 끝에 하나)와 그 사이에 하나 이상의 데이터 열이 있는 데이터 표를 사용합니다.

  • 첫 번째 열 - [선택사항, 문자열] 각 항목은 이를 지원하는 차트의 X축 (chl 또는 chxl 매개변수와 같음)에 사용되는 라벨을 나타냅니다.
  • 다음 열 - 각각 데이터 계열을 나타내는 숫자 열입니다.
  • 마지막 열 - [선택사항, 문자열] 데이터 열 뒤의 문자열 열 개수입니다. 여기서 각 항목은 데이터열을 지원하는 차트의 데이터 포인트 라벨을 나타냅니다. 이 열을 사용하려면 annotationColumns 옵션을 지정해야 합니다.

데이터는 차트 유형에 따라 다양한 방식으로 표시됩니다. 차트 문서를 참조하세요.

열 색인 관련 참고사항: 일반 이미지 차트 시각화는 표를 차트 API 서비스로 전송하기 전에 데이터 테이블에서 문자열 열을 삭제합니다. 따라서 이 페이지에 정의된 옵션, 메서드, 이벤트의 열 색인에는 색인 수의 문자열 열이 포함됩니다. 하지만 차트 API 서비스에서 처리하는 모든 옵션 (예: chm 옵션)의 열 색인은 색인 수의 문자열 열을 무시합니다.

구성 옵션

이 시각화에 대해 다음 옵션이 정의됩니다. 시각화의 draw() 메서드에 전달된 옵션 객체에서 정의합니다. 다음 옵션 중 일부는 차트 유형에 따라 지원되지 않을 수 있습니다. 정적 이미지 차트 유형에 대한 문서를 참고하세요. 원하는 Chart API URL 매개변수를 옵션으로 전달할 수 있습니다. 예를 들어 차트 시각화의 URL 매개변수 chg=50,50는 options['chg'] = '50,50'과 같은 방식으로 지정됩니다.

색상 관련 참고사항: colors, color, backgroundColor와 같은 색상 옵션은 Chart API 색상 형식으로 지정됩니다. 이 형식은 투명도를 나타내기 위해 네 번째 16진수(선택사항)를 포함한다는 점을 제외하면 #RRGGBB 형식과 유사합니다. '빨간색', '녹색', '파란색' 등 사람이 읽을 수 있는 색상은 지원되지 않습니다. Chart API 색상 형식에는 선행 # 기호가 포함되지 않지만 일반 이미지 차트 시각화 옵션에서는 #이 있거나 없는 색상 코드를 사용할 수 있습니다.

이름 유형 기본값 설명
annotationColumns Array<object> 없음

다양한 유형의 차트의 데이터 포인트 라벨. 객체의 배열로, 각 객체는 차트의 한 데이터 포인트에 형식이 지정된 라벨을 할당합니다. 이 옵션은 데이터 포인트를 지원하는 차트에만 사용할 수 있으며 (어떤 데이터 포인트인지 알아보려면 연결된 주제를 참고하세요.) 데이터 테이블에 문자열 라벨 열이 1개 이상 있어야 합니다.

배열의 각 객체에는 다음과 같은 속성이 있습니다.

  • column[숫자] - 주석에 사용된 텍스트가 포함된 열의 0부터 시작하는 색인입니다. 이 열의 모든 행에 값을 입력할 필요는 없습니다.
  • positionColumn[number] - 라벨을 지정할 데이터 포인트가 있는 열의 0부터 시작하는 색인입니다. 기본값은 첫 번째 데이터 열입니다.
  • color[문자열] - Chart API 색상 형식으로 된 주석 텍스트의 색상입니다. 기본값은 '#000000' (검은색)입니다.
  • size[숫자] - 주석의 글꼴 크기입니다(단위: 픽셀).
  • priority [string] - 'low', 'medium' 또는 'high'로, 라벨을 그려야 하는 레이어를 지정합니다. 기본값은 'medium'으로, 막대와 선 다음, 다른 라벨 앞에 라벨이 그려지도록 지정합니다.
  • type [string] - 'text' 또는 'flag'입니다. 'text'는 일반 텍스트 주석을 만들고 'flag'는 말풍선 주석을 만듭니다.

예 - 이 스니펫은 0열에서 가져온 텍스트로 동일한 행의 2열에 있는 데이터 포인트에 할당된 검은색 12픽셀 텍스트 라벨을 정의합니다. options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];
backgroundColor 문자열 '#FFFFFF' (흰색) Chart API 색상 형식으로 나타낸 차트의 배경색입니다.
색상 문자열 자동 모든 계열에 사용할 기본 색상을 지정합니다. 각 계열은 지정된 색상의 그라데이션으로 표시됩니다. 색상은 Chart API 색상 형식으로 지정됩니다. colors가 지정되면 무시됩니다.
색상 배열<문자열> 자동 이를 사용하여 각 데이터 계열에 특정 색상을 할당합니다. 색상은 Chart API 색상 형식으로 지정됩니다. 색상 i는 데이터 열 i에 사용되며, 색상보다 데이터 열이 많은 경우 시작 부분까지 래핑합니다. 단일 색상의 변형이 모든 계열에서 허용되는 경우 color 옵션을 대신 사용하세요.
enableEvents boolean false 차트에서 클릭 또는 마우스오버와 같은 사용자 트리거 이벤트를 발생시킵니다. 특정 차트 유형에서만 지원됩니다. 아래의 이벤트를 참고하세요.
fill boolean false true인 경우 각 줄 아래의 영역을 채웁니다. 선 차트에서만 사용할 수 있습니다.
firstHiddenColumn 숫자 없음

데이터 열 색인 나열된 열과 다음에 오는 모든 열은 기본 차트 계열 요소를 그리는 데 (예: 선 차트의 선 또는 막대 그래프의 막대)를 그리는 데 사용되지 않지만 마커 및 기타 주석의 데이터로 사용됩니다. 이 색인 수에는 문자열 열이 포함됩니다.
키 숫자 200 차트의 높이입니다(단위: 픽셀). 이 값이 누락되거나 허용 가능한 범위 내에 있지 않으면 포함하는 요소의 높이가 사용됩니다. 이 높이도 허용 범위를 벗어나면 기본 높이가 사용됩니다.
labels 문자열 '없음'

[원형 차트만 해당] 슬라이스별로 표시할 라벨(있는 경우)입니다. 다음 값 중에서 선택하세요.

  • 'none' - 라벨이 없습니다.
  • 'value' - 슬라이스 값을 라벨로 표시합니다.
  • 'name' - 슬라이스 이름 (열 이름)을 라벨로 표시합니다.
범례 문자열 '오른쪽' 차트를 기준으로 차트 범례를 표시할 위치 'top', 'bottom', 'left', 'right', 'none' 중 하나를 지정하세요. 지도 차트와 같이 범례를 포함하지 않는 차트에서는 무시됩니다.
max 숫자 최대 데이터 값 체중계에 표시되는 최댓값. 원형 차트에서는 무시됩니다. 기본값은 최댓값입니다. 단, 막대 그래프는 예외이며 기본값은 최댓값 데이터 값입니다. 표에 데이터 열이 2개 이상 있으면 막대 그래프의 경우 이 값이 무시됩니다.
분 숫자 최소 데이터 값 체중계에 표시되는 최솟값입니다. 원형 차트에서는 무시됩니다. 기본값은 최솟값입니다. 단, 막대 그래프의 기본값은 0입니다. 테이블에 데이터 열이 2개 이상 있으면 막대 그래프의 경우 이 값이 무시됩니다.
showCategoryLabels boolean true 카테고리 (예: 행) 축에 라벨을 표시할지 여부입니다. 선 차트와 막대 그래프에서만 사용할 수 있습니다.
showValueLabels boolean true True는 값 축에 라벨을 표시합니다. 선 차트와 막대 그래프에서만 사용할 수 있습니다.
singleColumnDisplay 숫자 없음 지정된 데이터 열만 렌더링합니다. 이 숫자는 테이블에 대한 0 기반 색인이며, 여기서 0은 첫 번째 데이터 열입니다. 단일 열에 할당된 색상은 모든 열이 렌더링될 때와 동일합니다. 원형 차트 또는 지도 차트와 함께 사용할 수 없습니다.
title 문자열 빈 문자열 차트 제목입니다. 지정하지 않으면 제목이 표시되지 않습니다. 이에 상응하는 차트 매개변수는 chtt입니다.
valueLabelsInterval 숫자 자동 값 축 라벨을 표시할 간격입니다. 예를 들어 min이 0, max이 100, valueLabelsInterval가 20이면 차트는 (0, 20, 40, 60, 80 100)에 축 라벨을 표시합니다.
너비 숫자 400 차트의 너비입니다(단위: 픽셀). 이 값이 누락되거나 허용 가능한 범위 내에 있지 않으면 포함하는 요소의 너비가 사용됩니다. 이 너비도 허용 범위를 벗어나면 기본 너비가 사용됩니다.

메서드

메서드 반환 유형 설명
draw(data, options) 없음 지도를 그립니다.
getImageUrl() 문자열 차트를 요청하는 데 사용된 Google 차트 API URL을 반환합니다. 2,000자(영문 기준)를 초과할 수 있습니다. 자세한 내용은 Google 차트 API를 참고하세요.

이벤트

enableEvents 속성을 true로 설정하면 지원되는 차트에서 아래 표에 나열된 사용자 이벤트에 대한 이벤트가 발생합니다. 이러한 모든 이벤트는 다음과 같은 속성이 있는 event 객체를 반환합니다.

  • type - 이벤트 유형을 나타내는 문자열입니다.
  • region - 영향을 받는 지역의 ID입니다. 사용 가능한 이름 목록을 보려면 원시 차트 유형에 chof=json 매개변수를 추가합니다. 자세한 내용은 chof=json를 참고하세요.
이름 설명 Value 유형
error 차트를 렌더링하려고 시도할 때 오류가 발생하면 실행됩니다. ID, 메시지
onmouseover 사용자가 차트 요소 위로 마우스를 가져가면 실행됩니다. "mouseover"
onmouseout 사용자가 차트 요소에서 마우스를 치우면 실행됩니다. 'mouseout'
onclick 사용자가 차트 요소를 클릭하면 실행됩니다.

"클릭"

어떤 차트에서 이벤트를 지원하나요?

chof=json 매개변수를 지원하는 모든 차트는 이벤트 발생을 지원합니다(즉, 특수 차트(예: QR 코드)를 제외한 모든 차트).

이벤트 처리 예

다음 예는 마우스 클릭을 기록하는 막대를 보여줍니다.

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
    <title>
       Google Image Events Sample
    </title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht:  'bvs', chs: '300x125',  colors:['#4D89F9','#C6D9FD'],
                       chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};

        var chart = new  google.visualization.ImageChart(document.getElementById('visualization'));
        chart.draw(dataTable, options);

        // Assign  event  handler
        google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
      }

      google.charts.setOnLoadCallback(drawVisualization);

      // Define an event handler
      function mouseEventHandler(event)  {
        document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
      }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
    <div id="debugger"></div>
  </body>
</html>

데이터 정책

데이터는 Google Chart API 서비스로 전송됩니다.

현지화

이 시각화는 Google 차트 서비스에서 지원하는 모든 현지화를 지원합니다.