시각화: 영역 차트 (이전 버전)

지원 중단됨

이 시각화는 새 버전으로 대체되었습니다. 이 버전을 사용하세요. 쉽게 이전하려면 출시 노트 페이지를 참고하세요.

개요

SVG 또는 VML을 사용하여 브라우저 내에서 렌더링되는 영역 차트 지점을 클릭할 때 도움말이 표시됩니다. 범례 항목을 클릭할 때 줄에 애니메이션을 적용합니다.

개발자: Google

예

시각화 플레이그라운드에서 직접 코딩

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["areachart"]});
      google.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.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

로드 중

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

  google.load("visualization", "1", {packages: ["areachart"]});

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

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

데이터 형식

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

구성 옵션

이름 유형 기본 설명
축 색상 문자열 또는 객체 기본 색상 축의 색상입니다. 가능한 값은 backgroundColor 구성 옵션의 값과 같습니다.
축 배경색 문자열 또는 객체 기본 색상 축 배경 주위의 테두리입니다. 가능한 값은 backgroundColor 구성 옵션의 값과 같습니다.
축 글꼴 크기 숫자 자동 사전 처리와 차트 축 텍스트의 글꼴 크기(픽셀)입니다.
배경 색상 문자열 또는 객체 기본 색상 차트의 기본 영역 배경색입니다. 다음 옵션 중 하나일 수 있습니다.
  • HTML에서 지원하는 색상이 포함된 문자열(예: 'red' 또는 '#00cc00')
  • stroke fill 및 strokeSize 속성이 있는 객체입니다. stroke 및 fill은 색상이 포함된 문자열이어야 합니다. 획 크기는 숫자입니다. 예: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1} 획 없이 채우기만 사용하려면 stroke:null, strokeSize: 0를 사용합니다.
테두리 색상 문자열 또는 객체 기본 색상 차트 요소 주변의 테두리입니다. 가능한 값은 backgroundColor 구성 옵션의 값과 같습니다.
색상 문자열 배열 기본 색상 차트 요소에 사용할 색상입니다. 문자열 배열입니다. 각 요소는 HTML에서 지원하는 색상인 문자열입니다(예: '빨간색' 또는 '#00cc00').
사용 설정 도움말 boolean true true로 설정하면 사용자가 데이터 포인트를 클릭할 때 도움말이 표시됩니다.
포커스테두리 색상 문자열 또는 객체 기본 색상 포커스가 있는 차트 요소 (마우스로 가리킴) 주변의 테두리 가능한 값은 backgroundColor 구성 옵션의 값과 같습니다.
높이 숫자 컨테이너 높이 차트의 높이(픽셀)입니다.
isStacked boolean false true로 설정하면 행 값이 누적됩니다 (누적).
전설 문자열 '오른쪽' 범례의 위치 및 유형 상태는 다음 중 하나일 수 있습니다.
  • 'right' - 차트의 오른쪽에 위치
  • '왼쪽' - 차트의 왼쪽
  • 'top' - 차트 위입니다.
  • 'bottom' - 차트 하단
  • 'none' - 범례가 표시되지 않습니다.
범례 배경 색상 문자열 또는 객체 기본 색상 차트 범례 영역의 배경색입니다. 가능한 값은 backgroundColor 구성 옵션의 값과 같습니다.
범례글꼴크기 숫자 자동 사전 처리와 범례 글꼴의 크기입니다(단위: 픽셀).
범례텍스트색상 문자열 또는 객체 기본 색상 범례 텍스트 색상입니다. 가능한 값은 backgroundColor 구성 옵션의 값과 같습니다.
선 크기 숫자 2 선의 너비(픽셀)입니다. 0을 사용하여 모든 선을 숨기고 점만 표시합니다.
로그 배율 boolean false true인 경우 기본 축의 대수가 조정되어야 합니다.
max 숫자 자동 사전 처리와 가장 높은 Y축 그리드 선을 지정합니다. 실제 그리드 선은 최대 옵션 값, 또는 가장 높은 데이터 값 중 두 번째 값 중 더 큰 그리드 표시로 반올림한 값입니다.
min 숫자 자동 사전 처리와 가장 낮은 Y축 그리드 선을 지정합니다. 실제 그리드 선은 두 번째 값 중 더 낮은 값이 되며, 최솟값 또는 최저 데이터 값은 그다음 낮은 그리드 마크로 내림됩니다.
포인트 사이즈 숫자 3 픽셀 단위로 표시된 점의 크기입니다. 모든 지점을 숨기려면 0을 사용하세요.
역축 boolean false true로 설정하면 카테고리를 오른쪽에서 왼쪽으로 그립니다. 기본값은 왼쪽에서 오른쪽으로 그리는 것입니다.
프로그램 카테고리 boolean true true인 경우 카테고리 라벨이 표시됩니다. false인 경우 그러지 않습니다.
title 문자열 제목 없음 차트 위에 표시할 텍스트입니다.
제목X 문자열 제목 없음 가로축 아래에 표시할 텍스트입니다.
제목 Y 문자열 제목 없음 세로축으로 표시할 텍스트입니다.
제목 색상 문자열 또는 객체 기본 색상 차트 제목의 색상입니다. 가능한 값은 backgroundColor 구성 옵션의 값과 같습니다.
제목 글꼴 크기 숫자 자동 사전 처리와 차트 제목의 글꼴 크기입니다(픽셀 단위).

FontFontSize		 숫자 11 도움말 텍스트의 글꼴 크기입니다. 도움말이 너무 작아서 지정된 글꼴로 텍스트를 유지하기 어려운 경우 크기가 줄어들 수 있습니다.
도움말 높이
 숫자 60 도움말의 높이(픽셀)입니다. 도움말의 높이는 고정되어 있으므로 텍스트의 길이나 글꼴 크기에 맞게 늘어나거나 줄어들지 않습니다. 하지만 차트 높이의 1/3보다 큰 값은 잘립니다.
tooltipWidth 숫자 120 도움말의 너비(픽셀)입니다. 도움말 너비는 고정되어 있으며 텍스트의 길이나 글꼴 크기에 맞게 늘어나거나 줄어들지 않습니다. 하지만 차트 너비보다 큰 항목은 잘립니다.
너비 숫자 컨테이너 너비 차트의 너비(픽셀)입니다.

방법

메서드 반환 유형 설명
draw(data, options) 없음 차트를 그립니다.
getSelection() 선택 요소 배열 표준 getSelection() 구현 선택한 요소는 열 및 셀 요소입니다. 사용자가 한 번에 하나의 열 또는 셀만 선택할 수 있습니다.
setSelection() 없음 표준 setSelection() 구현이지만 요소 1개만 선택할 수 있습니다. 모든 선택 항목을 열 또는 셀 선택으로 취급합니다. 라벨 열은 선택할 수 없습니다.

이벤트

이름 설명 속성
onmouseover 사용자가 한 지점 위로 마우스를 가져가서 상응하는 셀의 행과 열 색인을 전달하면 실행됩니다. 행, 열
onmouseout 사용자가 특정 지점에서 마우스를 치우고 해당하는 셀의 행 및 열 색인을 전달하면 실행됩니다. 행, 열
ready 차트에서 외부 메서드 호출을 사용할 수 있습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트에 대한 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다. 없음
select 사용자가 포인트 또는 범례를 클릭하면 실행됩니다. 점을 선택하면 데이터 테이블의 해당 셀이 선택됩니다. 범례가 선택되면 데이터 테이블의 해당 열이 선택됩니다. 어떤 항목이 선택되었는지 알아보려면 getSelection()를 호출합니다. 없음

데이터 정책

모든 코드와 데이터가 브라우저에서 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.