차트 시작하기

이 페이지에서는 차트 API를 사용하여 차트를 만드는 기본사항을 설명합니다.

Google 차트 사용 정책

Google Chart API에 대한 일일 호출 수에는 제한이 없습니다. 하지만 Google은 악의적으로 간주되는 사용을 차단할 권리를 보유합니다.

개요

이 문서에서 차트 보기

이 문서의 모든 차트 이미지는 차트 API를 사용하여 실시간으로 생성됩니다. 이미지의 URL을 보려면 다음 단계를 따르세요.

  • Firefox를 사용하는 경우 마우스 오른쪽 버튼을 클릭한 다음 '이미지 보기' 또는 '속성'을 선택합니다.
  • Internet Explorer를 사용하는 경우 마우스 오른쪽 버튼을 클릭한 다음 '속성'을 선택합니다.

이 문서에서는 URL을 더 쉽게 읽을 수 있도록 여러 줄로 표시하는 경우가 많습니다. Google 차트 API를 사용하는 경우 URL을 한 줄에 입력해야 합니다.

Google Chart API는 URL GET 또는 POST 요청에 대한 응답으로 차트 이미지를 반환합니다. API를 사용하면 원형 또는 선 차트에서 QR 코드 및 수식에 이르기까지 다양한 종류의 차트를 생성할 수 있습니다. 차트 데이터, 크기, 색상, 라벨 등 원하는 차트 관련 모든 정보는 URL의 일부입니다. POST 요청의 경우에는 약간 다르지만 지금은 그 점은 신경 쓰지 않아도 됩니다.

가장 간단한 차트를 만들려면 차트 유형, 데이터, 크기만 URL로 지정해야 합니다. 이 URL은 브라우저에 직접 입력하거나 웹페이지에서 <img> 태그를 사용하여 가리키는 URL을 사용할 수 있습니다. 예를 들어 원형 차트를 보려면 다음 링크를 클릭하세요.

https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World

 

위 링크는 기본 차트 API URL의 예입니다. 모든 차트 URL의 형식은 다음과 같습니다.

https://chart.googleapis.com/chart?cht=<chart_type>&chd=<chart_data>&chs=<chart_size>&...additional_parameters...

모든 URL은 https://chart.googleapis.com/chart?로 시작하고 그 뒤에 차트 데이터와 모양을 지정하는 매개변수가 옵니다. 매개변수는 앰퍼샌드 문자 (&)로 구분된 이름= 쌍이며 매개변수는 ? 다음에 어떤 순서로든 될 수 있습니다. 모든 차트에는 최소한 cht (차트 유형), chd (데이터), chs (차트 크기) 매개변수가 필요합니다. 그러나 추가 옵션의 매개변수가 더 많으며 차트에서 지원하는 만큼 추가 매개변수를 지정할 수 있습니다.

위 URL을 자세히 살펴보겠습니다.

URL 구성요소

노란색 원형 차트

https://chart.googleapis.com/chart?
  cht=p3&
  chs=250x100&
  chd=t:60,40&
  chl=Hello|World


https://chart.googleapis.com/chart?
모든 차트 요청의 기본 URL입니다.
cht=p3
차트 유형은 3D 원형 차트입니다.
chs=250x100
차트 크기(너비 x 높이)입니다(단위: 픽셀). 최댓값은 여기를 참고하세요.
chd=t:60,40
차트 데이터 이 데이터는 간단한 텍스트 형식이지만 다른 형식도 있습니다.
chl=Hello|World
슬라이스 라벨입니다.
&
매개변수는 앰퍼샌드로 구분됩니다. 참고: 예를 들어 <img> 태그의 src 속성으로 URL을 HTML에 삽입할 때 매개변수 사이의 &&amp; 문자로 대체해야 합니다. 여기에는 PHP 또는 다른 언어로 페이지 HTML을 생성하는 경우도 포함됩니다. 하지만 브라우저에서 URL을 입력하거나 코드에서 URL을 호출할 때(예: PHP 또는 Perl로 URL을 가져올 때) & 표시를 사용해야 합니다.

이 URL을 복사하여 브라우저에 붙여넣고 몇 가지 사항을 변경합니다. 데이터에 다른 값을 추가합니다. 각 새 데이터 값 앞에 쉼표를 추가해야 합니다. 새 라벨을 추가합니다 (각 새 값 앞에 | 표시). 차트를 확대합니다.

맨 위로

차트를 만드는 방법

이미지 차트를 만드는 방법은 다음과 같습니다.

  1. 차트 유형을 결정합니다. 차트 목록은 갤러리를 참고하세요. 차트 유형은 cht 매개변수로 지정됩니다. 차트에 포함할 모든 구성요소 (축, 라벨, 배경 등)를 스케치하고 필요한 경우 다양한 구성요소의 픽셀 크기 (총 차트 크기, 범례 크기 등)를 파악합니다. 먼저 해당 차트 유형에 대한 문서를 주의 깊게 읽어야 합니다. 그렇지 않으면 문제가 발생할 수 있습니다.
  2. 차트 데이터를 만들고 서식을 지정합니다. 데이터는 chd 매개변수를 사용하여 지정됩니다. 데이터에 사용할 형식을 결정해야 합니다.
    • 데이터 형식을 선택합니다. 차트 데이터에 간단한 텍스트 형식을 사용하여 읽기는 쉽지만 전송에 더 많은 공간을 사용할 수도 있고, 전송은 더 작지만 보낼 수 있는 값의 범위를 제한하는 인코딩 유형 중 하나를 사용할 수 있습니다.
    • 차트에 맞게 데이터 크기를 조정해야 하는지 결정합니다. 형식에 따라 지원되는 값 범위가 다릅니다. 차이를 더 명확하게 하기 위해 형식에 따라 허용되는 전체 값 범위에 걸쳐 데이터가 포함되도록 데이터를 조정할 수 있습니다. 사용하는 데이터 형식에 맞게 데이터 크기를 조정하거나 맞춤 크기 조정으로 텍스트 형식 지정을 사용하면 됩니다.
    • 필요한 경우 데이터를 인코딩합니다. 인코딩된 형식을 선택한 경우 다른 인코딩 유형에 도움이 되는 자바스크립트가 제공됩니다.
  3. 차트 크기를 지정합니다. 차트 크기는 chs 매개변수를 사용하여 지정됩니다. 형식과 최댓값은 문서를 참조하세요.
  4. 매개변수를 추가합니다. 각 차트의 문서에는 사용 가능한 선택적 매개변수가 나와 있습니다. 일반적인 옵션에는 라벨, 제목, 색상이 있습니다. 모든 라벨 또는 제목 텍스트는 UTF-8로 인코딩되어야 합니다. 많은 매개변수를 사용하여 여러 값을 입력할 수 있습니다. 예를 들어 chm 매개변수를 사용하면 차트의 단일 데이터 포인트에 도형을 배치할 수 있습니다. chm 매개변수를 사용하여 여러 데이터 포인트에 도형을 배치할 수 있지만, 이렇게 하려면 URL에 chm 매개변수를 여러 번 지정하지 마세요 (예: 잘못됨: chm=square&chm=circle&chm=triangle). 대신 여러 값을 사용하는 매개변수는 같은 매개변수의 여러 값 사이에 쉼표 또는 세로 막대와 같은 구분자를 사용합니다. chm의 경우 막대이므로 RIGHT: chm=square|circle|triangle과 같은 형식을 사용합니다. 여러 매개변수를 지정하는 방법을 알아보려면 각 매개변수의 세부정보를 참고하세요.
  5. URL 문자열을 작성합니다. URL은 https://chart.googleapis.com/chart?로 시작하고 그 뒤에 모든 필수 (cht, chd, chs) 및 선택적 매개변수가 뒤따릅니다. 참고: <img> 태그에서 URL을 사용하는 경우 링크의 모든 & 문자를 &amp;로 변경해야 합니다. 예: <img src="https://chart.googleapis.com/chart?chs=250x100&amp;chd=t:60,40&amp;cht=p3&amp;chl=Hello|World" />.
  6. GET 또는 POST를 사용하여 이미지를 가져옵니다. GET은 URL을 브라우저에 직접 입력하거나 <img> 태그에 사용하는 경우입니다. 그러나 URL의 길이는 2K로 제한되므로 2K보다 데이터가 많거나 마음에 드는 경우 여기에 설명된 대로 POST를 대신 사용하는 것이 좋습니다.
  7. 클릭 가능한 지역을 만듭니다. 원하는 경우 특정 차트 요소에 하이퍼링크를 추가하거나 요소를 클릭할 수 있는 차트용 이미지 지도를 만들 수 있습니다. 자세한 내용은 차트 이미지 맵 만들기를 참조하세요.

맨 위로

차트 용어집

다음은 이 문서에서 사용하는 몇 가지 중요한 용어입니다.

시리즈
차트의 관련 데이터 집합입니다. 계열을 구성하는 요소는 차트 유형에 따라 다릅니다. 선 차트에서 계열은 단일 선이고 원형 차트에서는 각 항목이 슬라이스이며 모든 슬라이스는 계열입니다. 막대 그래프에서 계열은 동일한 데이터 집합의 모든 막대입니다. 다른 계열은 막대 그래프 유형에 따라 나란히 그룹화되거나 서로 겹쳐집니다. 다음 차트는 진한 파란색 계열과 하늘색 계열의 두 계열로 된 그룹화된 막대 그래프를 보여줍니다.
고양이와 개의 두 계열을 보여주는 막대 그래프입니다.
축 라벨
각 축의 숫자 또는 텍스트 값입니다. 이전 차트에서는 '1월', '2월', '3월', '0', '50', '100'과 같은 라벨이 되었습니다.
차트 영역
시리즈 아트가 표시되는 영역입니다. 자세한 내용은 '차트 구성요소' 사이드바를 참고하세요.
범례
차트에서 시리즈를 설명하는 작은 영역입니다. 위의 차트에서 이 섹션은 '고양이'와 '개'를 나열합니다.
매개변수
URL에 사용되는 = 쌍입니다. chxt=x을 예로 들 수 있습니다. 여기서 chxt은 매개변수 이름이고 x은 매개변수 값입니다.
GETPOST
차트 URL을 전송하는 두 가지 방법 GET은 일반적으로 브라우저에 URL을 입력하거나 <img> 태그의 소스로 만드는 방식으로 실행됩니다. POST 요청은 실행하기가 더 복잡하지만 훨씬 더 많은 데이터를 포함할 수 있습니다. GET 대신 POST를 사용하는 주된 이유는 POST 요청이 GET 요청 (영문 기준 16,000자 또는 2,000자)보다 훨씬 더 많은 데이터를 사용할 수 있기 때문입니다. POST는 여기에서 다룹니다.
파이프 문자
| 문자는 매개변수 값 구분 기호로 자주 사용됩니다. 즉, 여러 값을 나누는 문자입니다. 쉼표와 앰퍼샌드(&)는 차트 URL에서 구분 기호로도 사용됩니다.
복합 차트
두 가지 차트 유형이 조합된 차트입니다(예: 선이 있는 막대 그래프 또는 원통형 마커가 있는 선 차트). 복합 차트를 참조하세요.

맨 위로

최적화

이제 차트 만들기의 기본사항을 알아보았으므로 사용할 수 있는 몇 가지 최적화를 살펴보겠습니다.

POST 사용

URL의 길이는 2K로 제한되므로 차트에 이보다 많은 데이터가 있는 경우 여기에 설명된 대로 GET 대신 POST를 사용해야 합니다. GET은 브라우저 URL 표시줄에 차트 URL을 입력하거나 웹페이지에서 <img> 요소의 소스로 사용하는 경우입니다. POST를 사용하려면 PHP 또는 PERL과 같은 다른 언어의 추가 프로그래밍이 필요합니다.

자바스크립트로 차트 만들기

Google 시각화 API를 사용하여 이미지 차트를 만들 수 있습니다. Google 시각화 API는 데이터를 생성, 필터링, 조작하거나 Google 스프레드시트 또는 다른 사이트에서 데이터를 쿼리하는 도구를 제공하는 JavaScript 기반 API입니다. 시각화 API를 사용하여 데이터를 만든 다음, 해당 데이터가 Image Charts API를 호출하여 페이지에서 차트를 렌더링하도록 할 수 있습니다. 자세한 내용은 일반 이미지 차트 문서를 참고하거나 시각화 갤러리에서 (이미지)로 표시된 Google 차트를 살펴보세요.