시각화: 일반 이미지 차트

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

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

개요

일반 이미지 차트는 Google Chart 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);

데이터 형식

일반화된 데이터 형식에는 지도 차트용과 다른 모든 차트용 등 두 가지가 있습니다. 데이터에 지원되는 숫자 형식은 자바스크립트 숫자 유형뿐입니다.

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

지도 차트

지도 차트는 2개의 필수 열이 있는 데이터 표를 가져옵니다.

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

지도 이외 차트

맵이 아닌 차트는 2개의 선택 열 (처음에는 1개, 끝에 1개)과 1개 이상의 데이터 열을 넣는 데이터 표를 취합니다.

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

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

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

구성 옵션

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

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

이름 유형 기본 설명
annotationColumn 배열<object> 없음

다양한 유형의 차트에 사용되는 데이터 포인트 라벨 객체의 배열로, 각각 차트의 단일 데이터 포인트에 형식이 지정된 라벨을 할당합니다. 이 옵션은 데이터 포인트를 지원하는 차트에만 사용할 수 있으며 (연결된 주제를 확인하여 어떤 포인트인지 알 수 있음) 데이터 테이블에 문자열 라벨 열이 하나 이상 있어야 합니다.

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

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

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

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

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

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

방법

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

이벤트

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

  • type - 이벤트 유형을 나타내는 문자열입니다.
  • region - 영향을 받는 지역의 ID chof=json 매개변수를 원시 차트 유형에 추가하여 사용 가능한 이름 목록을 표시합니다. 자세한 내용은 chof=json를 참고하세요.
이름 설명 유형 값
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 차트 서비스에서 지원하는 모든 현지화를 지원합니다.