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

지원 중단됨

이 시각화는 새 버전으로 대체되었습니다. 대신 이 버전을 사용하세요. 간편한 마이그레이션은 출시 노트 페이지를 참조하세요.

개요

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);

데이터 형식

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

구성 옵션

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

tooltipFontSize		 숫자 11 도움말 텍스트의 글꼴 크기입니다. 도움말이 너무 작아서 지정된 글꼴로 텍스트를 담을 수 없는 경우 글꼴 크기가 줄어들 수 있습니다.
tooltipHeight
 숫자 60 도움말의 높이입니다(단위: 픽셀). 도움말 높이는 고정되어 있으며, 텍스트의 길이나 글꼴 크기에 맞게 확장되거나 축소되지 않습니다. 하지만 차트 높이의 1/3보다 큰 값은 잘립니다.
tooltipWidth 숫자 120 도움말의 너비(픽셀)입니다. 도움말 너비가 고정되어 있으며, 텍스트의 길이나 글꼴 크기에 맞게 확장되거나 축소되지 않습니다. 하지만 차트 너비보다 큰 값은 잘립니다.
너비 숫자 컨테이너 너비 픽셀 단위의 차트 너비입니다.

메서드

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

이벤트

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

데이터 정책

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