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

차트 유형 만들기

이 페이지에서는 차트 유형을 직접 개발하고 사용자가 사용할 수 있도록 하는 방법을 설명합니다.

시청자층

이 페이지에서는 차트 사용 페이지를 읽었다고 가정합니다. 또한 개발자가 JavaScript 및 객체 지향 프로그래밍에 익숙하다고 가정합니다. 웹에 다양한 JavaScript 튜토리얼이 있습니다.

차트 만들기

차트는 생성된 JavaScript 라이브러리를 통해 사용자에게 노출됩니다. 차트 라이브러리를 만드는 단계는 다음과 같습니다.

코드의 네임스페이스를 선택합니다. 다른 페이지에서 코드를 호스팅하므로 이름이 충돌하지 않도록 해야 합니다.
차트 객체를 구현합니다. 다음을 노출하는 자바스크립트 객체를 구현합니다.
- 생성자는
- draw() 메서드: 생성자에 전달된 DOM 요소 내에 객체를 그립니다.
- 클라이언트에서 사용할 다른 선택적 표준 메서드(예: getSelection())
- 클라이언트에 노출하려는 모든 커스텀 메서드
[선택사항] 클라이언트가 포착하도록 실행하려는 모든 이벤트를 구현 합니다.
차트 문서를 작성합니다. 문서로 기록하지 않으면 다른 사용자가 삽입할 수 없습니다.
차트 갤러리에 차트를 게시합니다.

팁

goog.visualization API 클래스 및 메서드 정의를 다운로드하여 IDE (코드 편집기)에서 자동 완성을 사용 설정할 수 있습니다. http://www.google.com/uds/modules/gviz/gviz-api.js에서 파일을 다운로드하여 프로젝트에 저장합니다. IDE는 다를 수 있지만 대부분의 IDE는 자동으로 색인을 생성하고 자동 완성을 사용 설정합니다. 파일이 항상 최신 상태인 것은 아닙니다. 최신 API 참조는 참조 페이지에서 확인하세요.

네임스페이스 선택

다른 차트 또는 관련 없는 JavaScript를 호스팅하는 페이지에 차트를 삽입할 수 있습니다. 다른 코드 또는 CSS 클래스 이름과 이름이 충돌하지 않도록 차트 코드에 고유한 네임스페이스를 선택해야 합니다. 네임스페이스로는 스크립트를 호스팅하는 데 사용할 URL (WWW 및 모든 확장자 제외)을 선택하는 것이 좋습니다. 예를 들어 차트가 www.example.com에 게시되는 경우 example를 고유 네임스페이스로 사용합니다. 로 구분하여 접미사를 추가할 수 있습니다 . 표시를 사용하여 차트를 추가로 그룹화합니다 (모든 Google 차트에는 google.visualization 네임스페이스가 있음). 네임스페이스 객체를 사용하여 차트 객체와 필요한 전역 변수를 저장합니다.

다음은 MyTable이라는 차트 클래스와 필요한 전역 변수를 저장하기 위해 네임스페이스 객체를 만드는 예입니다.

// Namespace, implemented as a global variable.
var example = {};

// MyTable class constructor.
example.MyTable = function(container) {
  // ...
}

// MyTable.draw() method.
example.MyTable.prototype.draw = function(data, options) {
  // ...
}

CSS 충돌 방지

CSS를 사용하는 경우 페이지의 다른 차트에 영향을 줄 수 있는 CSS 규칙을 작성하지 않도록 합니다. 예를 들어 td {color: blue;}와 같은 규칙은 차트 내뿐 아니라 페이지의 다른 <td> 요소에 영향을 미치므로 사용하지 않는 것이 좋습니다. 이 문제를 해결하는 한 가지 방법은 전체 차트를 클래스 이름이 있는 <div>에 묶고 모든 CSS 규칙이 이 클래스 이름을 가진 요소의 하위 요소인 요소에만 적용되도록 하는 것입니다. 예를 들어 다음 CSS 규칙은 상위 요소로 클래스 이름이 'example'인 요소가 있는 <td> 요소에만 영향을 미칩니다.

td.example {color: blue;}

그런 다음 다음을 사용하여 <div>에서 차트를 래핑할 수 있습니다.

<div class="example">
  ...
</div>

차트 구현

참조 섹션에 설명된 표준 메서드를 노출하는 자바스크립트 객체로 차트를 구현해야 합니다. 두 가지 필수 메서드는 생성자와 draw() 메서드입니다. 차트에 적합한 추가 메서드를 사용자에게 노출할 수도 있습니다. 사용하기 쉬울수록 좋다는 점을 잊지 마세요.

생성자

차트는 단일 매개변수(차트를 그릴 DOM 요소)를 사용하는 단일 생성자를 노출해야 합니다. 일반적으로 차트는 나중에 사용할 수 있도록 이 요소의 로컬 사본을 생성자에 저장합니다.

function example.MyTable(container) {
  this.container = container
}

`draw()` 메서드

차트 클래스에는 차트 클래스의 프로토타입에 정의된 draw() 메서드가 있어야 합니다. draw() 메서드는 다음 두 매개변수를 허용합니다.

표시할 데이터를 보유하는 DataTable입니다.
차트의 이름/값 옵션의 맵(선택사항)입니다. 옵션의 이름과 값 유형은 특정 차트에 맞게 정의합니다. 예를 들어 아래의 Hello 차트 예에서 차트는 부울 유형의 값이 있는 'showLineNumber'라는 옵션을 지원합니다. 사용자가 특정 옵션의 값을 전달하지 않는 경우에 대비하여 각 옵션의 기본값을 지원해야 합니다. 이 매개변수는 선택사항이므로 사용자가 이 매개변수를 전달하지 않는 경우 모든 기본값을 사용할 준비를 해야 합니다 (자세히 알아보기).

example.MyTable.prototype.draw = function(data, options) {
  // Process data and options and render output into the container element.
  ...
}

안녕하세요, 차트입니다.

다음은 DataTable 데이터를 HTML 테이블로 표시하는 간단한 차트입니다.

구현 코드는 다음과 같습니다.

// Declare a unique namespace.
var example = {};

// Class constructor. Parameter container is a DOM elementon the client that
// that will contain the chart.
example.MyTable = function(container) {
  this.containerElement = container;
}

// Main drawing logic.
// Parameters:
//   data is data to display, type google.visualization.DataTable.
//   options is a name/value map of options. Our example takes one option.
example.MyTable.prototype.draw = function(data, options) {

  // Create an HTML table
  var showLineNumber = options.showLineNumber; // Boolean configuration option.

  var html = [];
  html.push('<table border="1">');

  // Header row
  html.push('<tr>');
  if (showLineNumber) {
    html.push('<th>Seq</th>');
  }
  for (var col = 0; col < data.getNumberOfColumns(); col++) {
    html.push('<th>' + this.escapeHtml(data.getColumnLabel(col)) + '</th>');
  }
  html.push('</tr>');

  for (var row = 0; row < data.getNumberOfRows(); row++) {
    html.push('<tr>');
    if (showLineNumber) {
      html.push('<td align="right">', (row + 1), '</td>');
    }

    for (var col = 0; col < data.getNumberOfColumns(); col++) {
      html.push(data.getColumnType(col) == 'number' ? '<td align="right">' : '<td>');
      html.push(this.escapeHtml(data.getFormattedValue(row, col)));
      html.push('</td>');
    }
    html.push('</tr>');
  }
  html.push('</table>');

  this.containerElement.innerHTML = html.join('');
}

// Utility function to escape HTML special characters
example.MyTable.prototype.escapeHtml = function(text) {
  if (text == null)
    return '';
  return text.replace(/&/g, '&').replace(/</g, '<')
      .replace(/>/g, '>').replace(/"/g, '"');
}

웹페이지에 차트 포함

이전 차트를 사용하려면 브라우저에서 액세스할 수 있는 .js 파일에 저장하세요. 그런 다음 <script> 소스 매개변수가 JavaScript 파일을 가리키도록 변경하여 다음 코드를 저장합니다.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="mytablevis.js"></script>
    <script type="text/javascript">
      google.charts.load("current");

      // Set callback to run when API is loaded
      google.charts.setOnLoadCallback(drawVisualization);

      // Called when the Chart API is loaded.
      function drawVisualization() {

        // Create and populate a data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Daily Hours');
        data.addRows(5);
        data.setCell(0, 0, 'Work');
        data.setCell(0, 1, 11);
        // Add more data rows and cells here

        // Instantiate our table object.
        var vis = new example.MyTable(document.getElementById('mydiv'));

        // Draw our table with the data we created locally.
        vis.draw(data, {showLineNumber: true});
       }
   </script>
  <title>MyTable example page</title></head>
  <body>
    <div id="mydiv"></div>
    <p>This page demonstrates hosting a table visualization.</p>
  </body>
</html>

이벤트 구현

차트에서 유용한 이벤트 (예: 타이머 이벤트 또는 클릭과 같이 사용자가 시작한 이벤트)를 실행하려면 이벤트 세부정보 (이름, 전송할 속성 등)를 사용하여 google.visualization.events.trigger 함수를 호출해야 합니다. 자세한 내용은 이벤트 페이지에서 확인할 수 있습니다. 이벤트 객체에 속성을 추가하여 이벤트 세부정보를 클라이언트에 노출하거나 차트의 일부 유형의 get...() 메서드를 노출할 수 있습니다. 그러면 클라이언트가 해당 메서드를 호출하여 이벤트 세부정보를 가져올 수 있습니다. 두 경우 모두 메서드 또는 이벤트 속성을 잘 문서화합니다.

차트 문서화

차트를 제대로 문서화하지 않으면 많은 사용자를 확보하지 못할 수 있습니다. 다음 사항을 문서화합니다.

지원하는 모든 방법을 설명하세요. draw() 메서드는 모든 차트에 공통되지만 각 차트에서 고유한 추가 메서드를 지원할 수 있습니다. (비표준 동작이 없는 한 생성자를 문서화할 필요는 없습니다.) 참조 페이지에서 예상 메서드 목록을 확인할 수 있습니다.
draw() 메서드가 지원하는 모든 옵션을 설명합니다. 여기에는 각 옵션의 이름, 예상 값 유형, 기본값이 포함됩니다.
트리거하는 모든 이벤트를 설명합니다. 즉, 각 이벤트의 이름과 속성, 그리고 각 이벤트가 트리거되는 시점을 의미합니다.
클라이언트의 <script> include 문에 사용해야 하는 차트 라이브러리의 URL을 나열하고 문서의 URL을 제공합니다.
차트의 정규화된 이름을 지정합니다.
지원되는 옵션, 이벤트, 커스텀 메서드로 차트를 사용하는 방법을 보여주는 샘플 페이지를 만듭니다.
차트의 데이터 정책을 명확하게 설명합니다. 대부분의 차트는 브라우저 내에서 데이터를 처리하지만 일부 차트는 예를 들어 차트 또는 지도의 이미지를 만들기 위해 데이터를 서버에 전송할 수 있습니다. 데이터를 서버로 전송하는 경우:
- 전송할 데이터를 명확하게 정의합니다.
- 데이터가 서버에 저장되는 기간을 확인합니다.
- 데이터에 액세스할 수 있는 항목을 문서화합니다. 예를 들어 회사 XYZ 등입니다.
- 데이터 로깅 여부와 로깅 기간을 지정합니다.

문서는 차트 코드와 같은 위치에 호스팅됩니다(아래의 갤러리에 차트 제출 참고).

갤러리에 차트 제출

차트를 작성한 후 갤러리의 '추가 차트' 섹션에 게시할 수 있도록 차트를 제출합니다. 차트를 제출하면 악성 소프트웨어를 만들거나 사용자 데이터를 오용하지 않는 데 동의하는 계약에 서명해야 합니다. 갤러리는 Google에서 만들었거나 Google에서 검토한 차트를 가리키는 포인터의 목록입니다. 자체 사이트에 실제 JavaScript 라이브러리와 문서를 호스팅하거나 Google에서 라이브러리와 문서를 호스팅하도록 선택할 수 있습니다. 갤러리에 차트를 게시할 때 Google에서 차트를 호스팅할지 여부를 지정합니다.

문제 해결

코드가 작동하지 않는 것 같으면 다음과 같은 방법으로 문제를 해결할 수 있습니다.

오타를 찾습니다. 자바스크립트는 대소문자를 구분하는 언어입니다.
Javascript 디버거를 사용합니다. Firefox에서는 JavaScript 콘솔, Venkman Debugger 또는 Firebug 부가기능을 사용할 수 있습니다. IE에서는 Microsoft Script Debugger를 사용할 수 있습니다.
Google Chart API 토론방을 검색해 보세요. 질문에 답변이 되는 게시물을 찾을 수 없는 경우 문제를 보여주는 웹페이지 링크와 함께 질문을 그룹에 게시하세요.

현지화

다양한 국가의 사람들이 차트를 사용할 것으로 예상되는 경우 여러 언어와 문화에 맞게 현지화되도록 차트를 디자인할 수 있습니다. 가장 기본적인 현지화는 사용자의 브라우저 설정에 따라 UI의 표준 텍스트 문자열을 번역하는 것입니다. 좀 더 고급화된 형태의 현지화는 현지화 또는 심지어 UI 디자인에 따라 숫자 형식을 변경하는 것입니다. 차트를 현지화하려면 차트에서 지원하는 언어를 문서에 나열하고 흔히 사용되는 언어의 기본 설정을 제공합니다. 또한 언어를 잘못 입력한 경우에 대비하여 차트의 UI에 '언어 변경' 버튼을 포함하는 것이 유용합니다. 브라우저 언어를 감지하는 일반적인 방법은 Accept-Language HTML 헤더를 확인하는 것입니다.