막대 그래프

개요

Google 바 차트는 SVG 또는 VML을 사용하여 브라우저에서 렌더링되며 이때 사용자의 브라우저에 적합합니다. 모든 Google 차트와 마찬가지로 막대 그래프에는 사용자가 데이터 위로 마우스를 가져가면 도움말이 표시됩니다. 이 차트의 세로 버전은 열 차트를 참고하세요.

예

색상 막대

4가지 귀금속의 밀도를 차트로 표시해 보겠습니다.

위의 모든 색상은 기본 파란색입니다. 모두 동일한 시리즈의 일부이기 때문입니다. 두 번째 시리즈가 있다면 빨간색으로 표시됩니다. 스타일 역할로 이러한 색상을 맞춤설정할 수 있습니다.

색상을 선택할 수 있는 세 가지 방법이 있으며 데이터 표에는 RGB 값, 영어 색상 이름, CSS와 같은 선언이 모두 표시됩니다.

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

막대 스타일

스타일 역할을 사용하면 CSS와 같은 선언으로 바 표시의 여러 측면을 제어할 수 있습니다.

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

차트 내에서 스타일을 지나치게 자유롭게 조합하지 않는 것이 좋습니다. 스타일을 선택하고 그대로 사용하면 안 됩니다. 다음은 모든 스타일 속성을 보여주기 위해 샘플러입니다.

처음 두 막대는 각각 특정 color를 사용합니다(첫 번째는 영어 이름이, 두 번째 막대는 RGB 값이 있음). opacity를 선택하지 않았으므로 기본값 1.0(완전 불투명)이 사용됩니다. 따라서 두 번째 막대가 그 뒤에 있는 그리드를 가립니다. 세 번째 막대에는 0.2의 opacity이 사용되어 격자선이 표시됩니다. 네 번째 막대에는 3가지 스타일 속성이 사용됩니다. stroke-color 및 stroke-width은 테두리를 그리고 fill-color은 직사각형 내부의 색상을 지정합니다. 맨 오른쪽 표시줄은 추가로 stroke-opacity 및 fill-opacity를 사용하여 테두리와 채우기의 불투명도를 선택합니다.

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

라벨 지정 바

차트에는 도움말의 눈금 라벨, 범례 라벨, 라벨과 같은 여러 종류의 라벨이 있습니다. 이 섹션에서는 막대 그래프의 막대 (또는 그 근처)에 라벨을 넣는 방법을 설명합니다.

각 막대에 적절한 화학 기호를 주석으로 추가하려고 한다고 가정해 보겠습니다. 이를 위해서는 annotation 역할을 사용하면 됩니다.

데이터 표에서 막대 라벨을 보관할 { role: 'annotation' }를 사용하여 새 열을 정의합니다.

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

사용자가 막대에 마우스를 가져가면 데이터 값을 볼 수 있지만 막대 자체에 포함하는 것이 좋습니다.

이는 좀 더 복잡합니다. 각 막대의 주석을 지정하는 DataView를 만들기 때문입니다.

  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>

값의 형식을 다르게 지정하려면 포맷러를 정의하고 다음과 같은 함수로 래핑하면 됩니다. 

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

그러면 calc: getValueAt.bind(undefined, 1)로 호출할 수 있습니다.

라벨이 너무 커서 막대 안에 들어가지 못하는 경우 라벨이 외부에 표시됩니다.

누적 막대 그래프

누적 막대 그래프는 관련 값을 위에 배치하는 막대 그래프입니다. 음수 값이 있으면 차트의 축 기준 아래에서 역순으로 스택됩니다. 누적 막대 그래프는 카테고리가 자연스럽게 구성요소로 나눌 때 사용됩니다. 예를 들어 장르별로 나눈 후 시간 경과에 따라 비교되는 도서 판매를 가정해 보겠습니다.

isStacked 옵션을 true로 설정하여 누적 막대 그래프를 만듭니다.

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

또한 누적 막대 그래프는 100% 스태킹을 지원합니다. 이 경우 각 도메인 값의 요소 스택이 최대 100%까지 재확장됩니다. 이를 위한 옵션에는 각 값의 형식을 100%로 지정하는 isStacked: 'percent' 및 각 값의 형식을 1의 비율로 지정하는 isStacked: 'relative'가 있습니다. isStacked: true와 기능적으로 동일한 isStacked: 'absolute' 옵션도 있습니다.

오른쪽에 있는 100% 누적 차트에서 눈금 값은 1의 분수로 표현된 상대적인 0-1 배율을 기반으로 하지만 축 값은 백분율로 표시됩니다. 이는 비율 축 눈금이 0.1의 상대적인 스케일 값에 '#'.##% 형식을 적용한 결과이기 때문입니다. isStacked: 'percent'를 사용할 때는 상대적인 0~1 척도를 사용하여 틱을 지정해야 합니다.

스택
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
100% 스택
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

Material 막대 차트 만들기

2014년 Google은 Google 플랫폼에서 실행되는 모든 속성 및 앱 (예: Android 앱)에서 일반적인 디자인을 지원하기 위한 가이드라인을 발표했습니다. 이러한 작업을 머티리얼 디자인이라고 합니다. Google에서는 모든 핵심 차트의 '머티리얼' 버전을 제공합니다. 원하는 경우 차트를 사용할 수 있습니다.

머티리얼 막대 그래프를 만드는 것은 이제 '클래식' 막대 그래프라고 부르는 것과 유사합니다. Google 시각화 API를 로드하고('corechart' 패키지 대신 'bar' 패키지 사용) 데이터 테이블을 정의한 후 객체를 만듭니다 (google.visualization.BarChart 대신 클래스 google.charts.Bar).

참고: 이전 버전의 Internet Explorer에서는 머티리얼 차트가 작동하지 않습니다. IE8 이하 버전에서는 머티리얼 차트에 필요한 SVG를 지원하지 않습니다.

Material 막대 그래프는 색상 막대, 둥근 모서리, 명확한 라벨 형식, 시리즈 간 기본 간격 유지, 더 부드러운 그리드 및 제목 (및 자막 추가)을 비롯하여 클래식 막대 그래프보다 많은 부분이 개선되었습니다.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

머티리얼 차트는 베타 버전입니다. 디자인 및 상호작용은 대부분 최종적이지만 클래식 차트에서는 사용할 수 있는 많은 옵션이 아직 제공되지 않습니다. 이 문제에서 아직 지원되지 않는 옵션 목록을 확인할 수 있습니다.

옵션 선언 방법은 확정되지 않았으므로 기존 옵션을 사용하는 경우 다음 줄을 바꿔 머티리얼 옵션으로 변환해야 합니다.

chart.draw(data, options);

...다음으로 대체:

chart.draw(data, google.charts.Bar.convertOptions(options));

google.charts.Bar.convertOptions()를 사용하면 hAxis/vAxis.format 사전 설정 옵션과 같은 특정 기능을 활용할 수 있습니다.

이중 X 차트

참고: 이중 X축은 머티리얼 차트 (bar 패키지가 있는 차트)에만 사용할 수 있습니다.

계열 차트에 한 계열의 상단 축과 다른 계열의 하단 축으로 구성된 두 개의 독립적인 x축을 사용하여 두 개의 계열을 막대 그래프로 표시할 수 있습니다.