시각화: 열 차트 (이전 버전)

지원 중단됨

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

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

개요

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:["columnchart"]});
      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.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

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

로드

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

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

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

  var visualization = new google.visualization.ColumnChart(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 구성 옵션의 값과 같습니다.
색상 문자열 또는 객체의 배열 기본 색상

색상의 배열로, 각 요소는 한 계열의 색상을 지정합니다. 각 계열에 하나의 배열 요소를 지정해야 합니다.

  • is3D=false인 경우 HTML 색상의 배열입니다. 예: colors:['#00FF00','orange']
  • is3D=true인 경우 HTML 색상 또는 {color:face_color, darker:shade_color} 유형의 객체 배열입니다. 여기서 color는 요소의 얼굴 색상이고 darker는 음영 색상입니다. 하지만 3D 객체의 HTML 색상을 지정하면 면과 음영은 동일한 색상이 되고 3D 효과가 줄어듭니다. 예시: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean true true로 설정하면 사용자가 열을 클릭할 때 도움말이 표시됩니다.
focusBorderColor 문자열 또는 객체 기본 색상 포커스가 있는 (마우스로 가리키는) 차트 요소 주변의 테두리입니다. 가능한 값은 backgroundColor 구성 옵션의 값과 같습니다.
키 숫자 컨테이너 높이 픽셀 단위의 차트 높이입니다.
3D boolean false true로 설정하면 3차원 변경을 표시합니다.
isStacked boolean false true로 설정하면 행 값이 누적 (누적)됩니다.
범례 문자열 '오른쪽' 범례의 위치 및 유형입니다. 상태는 다음 중 하나일 수 있습니다.
  • 'right' - 차트의 오른쪽에 위치.
  • 'left' - 차트의 왼쪽에 있습니다.
  • 'top' - 차트 위
  • 'bottom' - 차트 아래.
  • '없음' - 범례가 표시되지 않습니다.
legendBackgroundColor 문자열 또는 객체 기본 색상 차트 범례 영역의 배경 색상입니다. 가능한 값은 backgroundColor 구성 옵션의 값과 같습니다.
legendFontSize 숫자 자동 범례 글꼴의 크기입니다(단위: 픽셀).
legendTextColor 문자열 또는 객체 기본 색상 범례의 텍스트 항목 색상입니다. 가능한 값은 backgroundColor 구성 옵션의 값과 같습니다.
logScale boolean false true인 경우 기본 축의 배율이 대수적으로 조정됩니다.
max 숫자 자동 가장 높은 Y축 그리드 선을 지정합니다. 실제 그리드 선은 두 값, 즉 최대 옵션 값 또는 가장 높은 데이터 값(다음으로 높은 그리드 표시로 올림) 중 더 큰 값입니다.
분 숫자 자동 가장 낮은 Y축 그리드 선을 지정합니다. 실제 그리드 선은 두 값 중 더 작은 값인 최솟값과 가장 낮은 데이터 값 중 그다음 아래 그리드 표시로 내림합니다 .
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()를 호출합니다. 없음

데이터 정책

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