축 맞춤설정

개요

데이터의 측정기준은 , 가로, 세로로 표시되는 경우가 많습니다. 바로 영역 차트, 막대 그래프, 원통형 차트, 열 차트, 콤보 차트, 선 차트, 스테핑 영역 차트, 분산형 차트입니다.

축이 있는 차트를 만들 때 일부 속성을 맞춤설정할 수 있습니다.

  • 이산 vs. 연속
  • 방향 - hAxis/vAxis.direction 옵션을 사용하여 방향을 맞춤설정할 수 있습니다.
  • 라벨 배치 및 스타일 - hAxis/vAxis.textPosition 및 hAxis/vAxis.textStyle 옵션을 사용하여 라벨 배치와 스타일을 맞춤설정할 수 있습니다.
  • 축 제목 텍스트 및 스타일 - hAxis/vAxis.title 및 hAxis/vAxis.titleTextStyle 옵션을 사용하여 축 제목 텍스트와 스타일을 맞춤설정할 수 있습니다.
  • 축 배율 - hAxis/vAxis.logScale 또는 hAxis/vAxis.scaleType 옵션을 사용하여 축 배율을 로그 (로그) 배율로 설정할 수 있습니다.
  • 축 구성 옵션의 전체 목록을 보려면 특정 차트의 문서에서 hAxis 및 vAxis 옵션을 참고하세요.

용어

주요/보조 축:

  • 축은 차트의 자연스러운 방향을 따르는 축입니다. 선, 영역, 열, 콤보, 계단식 영역, 원통형 차트의 경우 가로축입니다. 막대 그래프는 세로 차트입니다. 분산형 및 원형 차트에는 주요 축이 없습니다.
  • 보조 축이 다른 축입니다.

불연속/연속 축:

  • 불연속 축에는 균일한 수의 간격이 있는 값, 즉 카테고리가 있습니다.
  • 연속 축에는 가능한 값이 무한합니다.

개별 및 연속

차트의 주요 축은 불연속 또는 연속일 수 있습니다. 불연속 축을 사용할 때 각 계열의 데이터 포인트는 행 색인에 따라 축 전체에서 균일한 간격으로 배치됩니다. 연속 축을 사용하는 경우 데이터 포인트는 도메인 값에 따라 정렬됩니다.

라벨 지정도 다릅니다. 불연속 축에서 카테고리의 이름 (데이터의 도메인 열에 지정됨)은 라벨로 사용됩니다. 연속 축에서는 라벨이 자동으로 생성됩니다. 차트에는 균등한 간격의 그리드 선이 표시되며 각 그리드 선은 라벨에 따라 값에 라벨이 지정됩니다.

다음 축은 항상 연속적입니다.

  • 두 축의 풍선형 차트
  • 보조 축.

선, 영역, 막대, 열 및 원통형 차트 (및 이러한 계열만 포함된 콤보 차트)에서 주요 축 유형을 제어할 수 있습니다.

  • 불연속 축의 경우 데이터 열 유형을 string로 설정합니다.
  • 연속 축의 경우 데이터 열 유형을 number, date, datetime 또는 timeofday 중 하나로 설정합니다.
불연속 / 지속적 첫 번째 열 유형
개별 문자열
연속 숫자
연속 date

축 배율

scaleType 옵션을 사용하여 축의 크기를 설정할 수 있습니다. 예를 들어 세로축의 배율을 로그 배율로 설정하려면 다음 옵션을 사용합니다.

  vAxis: {
        scaleType: 'log'
  }

다음 선 차트는 선형 (표준) 배율과 로그 배율로 전 세계 인구 증가를 보여줍니다.

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

        function drawStuff() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Country');
          data.addColumn('number', 'GDP');
          data.addRows([
            ['US', 16768100],
            ['China', 9181204],
            ['Japan', 4898532],
            ['Germany', 3730261],
            ['France', 2678455]
          ]);

         var options = {
           title: 'GDP of selected countries, in US $millions',
           width: 500,
           height: 300,
           legend: 'none',
           bar: {groupWidth: '95%'},
           vAxis: { gridlines: { count: 4 } }
         };

         var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
         chart.draw(data, options);

         document.getElementById('format-select').onchange = function() {
           options['vAxis']['format'] = this.value;
           chart.draw(data, options);
         };
      };
    </script>
  </head>
  <body>
    <select id="format-select">
      <option value="">none</option>
      <option value="decimal" selected>decimal</option>
      <option value="scientific">scientific</option>
      <option value="percent">percent</option>
      <option value="currency">currency</option>
      <option value="short">short</option>
      <option value="long">long</option>
    </select>
    <div id="number_format_chart">
  </body>
</html>

텍스트를 사용하는 형식 (예: 8백만 개의 '800만'으로 렌더링하는 long 형식)을 사용하는 경우 Google 차트 라이브러리를 로드할 때 언어 코드를 지정하여 문자열을 다른 언어로 현지화할 수 있습니다. 예를 들어 '8백만'을 러시아어 '8 миллиона'로 변경하려면 라이브러리를 다음과 같이 호출합니다.

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
  google.charts.load('current', {'packages': ['corechart'], 'language': 'ru'});
  google.charts.setOnLoadCallback(drawMarkersMap);
</script>