시각화: 세로 막대형 차트

개요

열 차트는 사용자의 브라우저에 적합한 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가 사용되어 격자선이 표시됩니다. 네 번째에서는 세 가지 스타일 속성이 사용됩니다. 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" src="https://www.gstatic.com/charts/loader.js"></script>
  <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.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="columnchart_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% 누적 차트에서 눈금 값은 0~1의 상대적인 비율을 1의 분수로 나타내지만 축 값은 백분율로 표시됩니다. 이는 백분율 축 눈금이 상대적인 0~1 배율 값에 '#.##%' 형식을 적용한 결과이기 때문입니다. isStacked: 'percent'를 사용할 때는 0~1의 상대적인 배율을 사용하여 눈금/축 값을 지정해야 합니다.

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

Material 열 차트 만들기

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

머티리얼 열 차트를 만드는 것은 '기본' 열 차트를 만드는 것과 비슷합니다. ('corechart' 패키지 대신 'bar' 패키지를 사용하더라도) Google 시각화 API를 로드하고 데이터 테이블을 정의한 다음 객체를 만듭니다 (google.visualization.ColumnChart 대신 google.charts.Bar 클래스).

막대 그래프와 열 차트는 본질적으로 동일하지만 방향의 경우 막대가 세로 (기존의 열 차트)인지 가로 (막대 그래프)인지와 관계없이 두 가지 머티리얼 막대 그래프를 모두 호출합니다. Material의 유일한 차이점은 bars 옵션에 있습니다. 'horizontal'로 설정하면 방향이 기존의 기본 막대 그래프와 비슷하며, 그렇지 않으면 막대가 세로형이 됩니다.

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

머티리얼 열 차트는 개선된 색상 팔레트, 둥근 모서리, 더 명확한 라벨 서식, 시리즈 간 더 뚜렷한 기본 간격, 더 부드러운 격자선 및 제목 (부제목 추가) 등 기본 열 차트에 비해 여러 부분이 개선되었습니다.

<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',
          }
        };

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

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

머티리얼 차트는 베타 버전입니다. 모양과 상호작용은 대부분 최종적이지만 기본 차트에서 제공되는 옵션 중 상당수는 아직 사용할 수 없습니다. 이 문제에서 아직 지원되지 않는 옵션 목록을 확인할 수 있습니다.

또한 옵션 선언 방식은 확정되지 않았으므로 기존 옵션을 사용 중인 경우 다음 줄을 바꿔 Material 옵션으로 변환해야 합니다.

chart.draw(data, options);

...다음으로 대체:

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

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

이중 Y 차트

경우에 따라 하나의 계열에 두 개의 계열을 두 개의 독립적인 Y축(한 계열에는 왼쪽 축, 다른 계열에는 오른쪽 축)으로 표시해야 할 수 있습니다.

두 y축의 라벨이 다르게 지정('파석' 또는 '겉보기 크기')될 뿐 아니라 각각의 독립된 척도와 격자선이 있습니다. 이 동작을 맞춤설정하려면 vAxis.gridlines 옵션을 사용하세요.

아래 코드에서 axes 및 series 옵션은 함께 차트의 이중 Y 모양을 지정합니다. series 옵션은 각 축에 사용할 축을 지정합니다 ('distance' 및 'brightness'. 이 두 축은 데이터 테이블의 열 이름과 아무런 관계가 없음). axes 옵션은 이 차트를 이중 Y 차트로 만들어 'distance' 축을 왼쪽('파섹'로 라벨이 지정됨)에, 'brightness' 축을 오른쪽에 배치('실제 크기'로 라벨이 지정됨)로 만듭니다. 

<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', 'bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var materialOptions = {
          width: 900,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            y: {
              distance: {label: 'parsecs'}, // Left y-axis.
              brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis.
            }
          }
        };

        var classicOptions = {
          width: 900,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Nearby galaxies - distance on the left, brightness on the right',
          vAxes: {
            // Adds titles to each axis.
            0: {title: 'parsecs'},
            1: {title: 'apparent magnitude'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Bar(chartDiv);
          materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ColumnChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };
    </script>
  </head>
  <body>
    <button id="change-chart">Change to Classic</button>
    <br><br>
    <div id="chart_div" style="width: 800px; height: 500px;"></div>
  </body>
</html>

상위 X 차트

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

X축 라벨과 제목을 하단이 아닌 차트 상단에 배치하려면 Material 차트에서 axes.x 옵션을 사용하여 배치하면 됩니다.

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          width: 800,
          legend: { position: 'none' },
          chart: {
            title: 'Chess opening moves',
            subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 800px; height: 600px;"></div>
  </body>
</html>

로드

google.charts.load 패키지 이름은 "corechart"입니다. 시각화의 클래스 이름은 google.visualization.ColumnChart입니다. 

  google.charts.load("current", {packages: ["corechart"]});

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

머티리얼 열 차트에서 google.charts.load 패키지 이름은 "bar"입니다. (오타가 아닙니다. 머티리얼 막대 차트는 두 방향을 모두 처리합니다.) 시각화의 클래스 이름은 google.charts.Bar입니다. (오타가 아닙니다. 머티리얼 막대 차트는 두 방향을 모두 처리합니다.)

  google.charts.load("current", {packages: ["bar"]});

  var chart = new google.charts.Bar(container);

데이터 형식

표의 각 행은 인접한 막대의 그룹을 나타냅니다.

행: 표의 각 행은 막대 그룹을 나타냅니다.

열:

  열 0 열 1 ... N열
목적: 이 그룹의 막대 1 값 ... 이 그룹의 막대 N개 값
데이터 유형: 숫자 ... 숫자
역할: 도메인 데이터 ... 데이터
열 역할(선택사항): ...

 

구성 옵션

이름
animation.duration

애니메이션 재생 시간(밀리초)입니다. 자세한 내용은 애니메이션 문서를 참고하세요.

유형: 숫자
기본값: 0
animation.easing

애니메이션에 적용된 이징 함수입니다. 사용할 수 있는 옵션은 다음과 같습니다.

  • 'linear' - 일정한 속도.
  • 'in' - Ease in - 천천히 시작하여 속도를 높입니다.
  • 'out' - Ease out - 빠르게 시작하고 느려집니다.
  • 'inAndOut' - 이즈 인/아웃 - 천천히 시작한 다음 속도를 높인 다음 낮춥니다.
유형: 문자열
기본값: 'linear'
animation.startup

처음 그릴 때 차트에 애니메이션을 적용할지 여부를 결정합니다. true인 경우 차트가 기준에서 시작하여 최종 상태로 애니메이션됩니다.

유형: 불리언
기본값 false
annotations.alwaysOutside

막대 및 열 차트에서 true로 설정된 경우 막대/열 외부에 모든 주석을 그립니다.

유형: 불리언
기본값: false
annotations.boxStyle

주석을 지원하는 차트의 경우 annotations.boxStyle 객체가 주석을 둘러싼 상자의 모양을 제어합니다. 

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

이 옵션은 현재 영역, 막대, 열, 콤보, 선 및 분산형 차트에서 지원됩니다. 주석 차트에서는 지원되지 않습니다.

유형: 객체
기본값: null
annotations.datum
주석을 지원하는 차트의 경우 annotations.datum 객체를 사용하면 개별 데이터 요소에 제공된 주석 (예: 막대 그래프의 각 막대와 함께 표시되는 값)에 관한 Google 차트의 선택을 재정의할 수 있습니다. annotations.datum.stem.color로 색상, annotations.datum.stem.length로 스템 길이, annotations.datum.style로 스타일을 제어할 수 있습니다.
유형: 객체
기본: 색상은 'black', 길이는 12, 스타일은 '포인트'입니다.
annotations.domain
주석을 지원하는 차트의 경우 annotations.domain 객체를 사용하면 도메인 (일반적인 선 차트의 X 축과 같은 차트의 주축)에 대해 Google 차트에서 선택한 주석을 재정의할 수 있습니다. annotations.domain.stem.color로 색상, annotations.domain.stem.length로 스템 길이, annotations.domain.style로 스타일을 제어할 수 있습니다.
유형: 객체
기본: 색상은 'black', 길이는 5, 스타일은 '포인트'입니다.
annotations.highContrast
주석을 지원하는 차트의 경우 annotations.highContrast 부울을 사용하면 Google 차트의 주석 색상을 재정의할 수 있습니다. 기본적으로 annotations.highContrast가 true이므로 차트에서 대비가 좋은 주석 색상(어두운 배경에는 밝은 색상, 밝은 배경에는 어둡게)을 선택합니다. annotations.highContrast를 false로 설정하고 주석 색상을 직접 지정하지 않으면 Google 차트에서 주석의 기본 계열 색상을 사용합니다.
유형: 불리언
기본값: true
annotations.stem
주석을 지원하는 차트의 경우 annotations.stem 객체를 사용하면 Google 차트의 스템 스타일을 재정의할 수 있습니다. annotations.stem.color로 색상을, annotations.stem.length로 스템 길이를 제어할 수 있습니다. 스템 길이 옵션은 'line' 스타일의 주석에는 영향을 미치지 않습니다. 'line' 데이텀 주석의 경우 스템 길이는 항상 텍스트와 같고 'line' 도메인 주석의 경우 스템이 전체 차트에 걸쳐 확장됩니다.
유형: 객체
기본값: 색상은 'black'입니다. 도메인 주석의 경우 길이는 5, 데이텀 주석의 경우 12입니다.
annotations.style
주석을 지원하는 차트의 경우 annotations.style 옵션을 사용하면 Google 차트의 주석 유형을 재정의할 수 있습니다. 'line' 또는 'point'이 될 수 있습니다.
유형: 문자열
기본값: 'point'
annotations.textStyle
주석을 지원하는 차트의 경우 annotations.textStyle 객체가 주석의 텍스트 모양을 제어합니다. 
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

이 옵션은 현재 영역, 막대, 열, 콤보, 선 및 분산형 차트에서 지원됩니다. 주석 차트 에서는 지원되지 않습니다.

유형: 객체
기본값: null
axisTitlesPosition

차트 영역과 비교한 축 제목을 배치할 위치입니다. 지원되는 값:

  • in - 차트 영역 내에 축 제목을 그립니다.
  • out - 차트 영역 바깥에 축 제목을 그립니다.
  • none(없음) - 축 제목을 생략합니다.
유형: 문자열
기본값: 'out'
backgroundColor

차트의 기본 영역의 배경 색상입니다. 간단한 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이거나 다음과 같은 속성을 갖는 객체일 수 있습니다.

유형: 문자열 또는 객체
기본값: 'white'
backgroundColor.stroke

차트 테두리의 색상으로, HTML 색상 문자열로 지정됩니다.

유형: 문자열
기본값: '#666'
backgroundColor.strokeWidth

테두리 너비(픽셀)입니다.

유형: 숫자
기본값: 0
backgroundColor.fill

HTML 색상 문자열로 된 차트 채우기 색상입니다.

유형: 문자열
기본값: 'white'
bar.groupWidth
다음 형식 중 하나로 지정된 막대 그룹의 너비입니다.
  • 픽셀 (예: 50)
  • 각 그룹에서 사용 가능한 너비의 비율입니다 (예: '20%'). 여기서 '100%'는 그룹 사이에 공백이 없음을 의미합니다.
유형: 숫자 또는 문자열
기본값: 황금 비율로, 약 '61.8%'입니다.
막대

머티리얼 막대 그래프의 막대가 세로인지 가로인지 여부 이 옵션은 기본 막대 그래프 또는 기본 열 차트에는 영향을 미치지 않습니다.

유형: 'horizontal' 또는 'vertical'
기본값: 'vertical'
chartArea

차트 영역의 위치와 크기를 구성하는 구성원이 포함된 객체입니다 (축과 범례를 제외하고 차트 자체가 그려지는 곳). 숫자 또는 숫자 뒤에 %가 오는 두 가지 형식이 지원됩니다. 단순한 숫자는 픽셀 단위 값이고 숫자 다음에 % 가 오는 백분율입니다. 예: chartArea:{left:20,top:0,width:'50%',height:'75%'}

유형: 객체
기본값: null
chartArea.backgroundColor
차트 영역 배경 색상입니다. 문자열이 사용되는 경우 16진수 문자열(예: '#fdc') 또는 영어 색상 이름입니다. 객체가 사용되면 다음 속성이 제공될 수 있습니다.
  • stroke: 색상으로, 16진수 문자열 또는 영어 색상 이름으로 제공됩니다.
  • strokeWidth: 제공된 경우 지정된 너비의 차트 영역 주위에 stroke의 색상으로 테두리를 그립니다.
유형: 문자열 또는 객체
기본값: 'white'
chartArea.left

왼쪽 테두리에서 차트를 그리는 거리입니다.

유형: 숫자 또는 문자열
기본값: auto
chartArea.top

위쪽 테두리에서 차트를 그리는 거리입니다.

유형: 숫자 또는 문자열
기본값: auto
chartArea.width

차트 영역 너비입니다.

유형: 숫자 또는 문자열
기본값: auto
chartArea.height

차트 영역 높이

유형: 숫자 또는 문자열
기본값: auto
chart.subtitle

머티리얼 차트의 경우 이 옵션은 부제목을 지정합니다. 머티리얼 차트만 자막을 지원합니다.

유형: 문자열
기본값: null
chart.title

머티리얼 차트의 경우 이 옵션은 제목을 지정합니다.

유형: 문자열
기본값: null
색상

차트 요소에 사용할 색상입니다. 문자열 배열로, 여기서 각 요소는 HTML 색상 문자열입니다(예: colors:['red','#004411']).

유형: 문자열 배열
기본값: 기본 색상
dataOpacity

데이터 포인트의 투명도(1.0은 완전히 불투명, 0.0은 완전히 투명함). 분산형, 히스토그램, 막대, 열 차트에서 이는 표시되는 데이터를 나타냅니다. 분산형 차트의 경우 점이고 다른 경우에는 직사각형입니다. 선 차트 및 영역 차트와 같이 데이터를 선택하면 점이 생성되는 차트에서 이는 마우스 오버 또는 선택 시 표시되는 원을 가리킵니다. 콤보 차트는 두 동작을 모두 보여주며 이 옵션은 다른 차트에 영향을 미치지 않습니다. 추세선의 불투명도를 변경하려면 추세선 불투명도 를 참고하세요.

유형: 숫자
기본값: 1.0
enableInteractivity

차트에서 사용자 기반 이벤트가 발생하는지 또는 사용자 상호작용에 반응하는지 여부입니다. false인 경우 차트에서 'select' 또는 기타 상호작용 기반 이벤트가 발생하지 않고 (준비됨 또는 오류 이벤트는 발생함) 사용자 입력에 따라 마우스 오버 텍스트를 표시하거나 달리 변경되지 않습니다.

유형: 불리언
기본값: true
익스플로러

explorer 옵션을 사용하면 사용자가 Google 차트를 화면 이동 및 확대/축소할 수 있습니다. explorer: {}는 기본 탐색기 동작을 제공하여 사용자가 드래그를 통해 가로 및 세로로 화면을 이동하고 스크롤하여 확대/축소할 수 있도록 합니다.

이 기능은 시험용이며 향후 출시 버전에서 변경될 수 있습니다.

참고: 탐색기는 연속된 축 (예: 숫자, 날짜)에서만 작동합니다.

유형: 객체
기본값: null
explorer.actions

Google 차트 탐색기는 세 가지 작업을 지원합니다.

  • dragToPan: 차트를 드래그하여 가로와 세로 방향으로 이동합니다. 가로축을 따라서만 이동하려면 explorer: { axis: 'horizontal' }를 사용합니다. 세로축도 마찬가지입니다.
  • dragToZoom: 탐색기의 기본 동작은 사용자가 스크롤할 때 확대/축소하는 것입니다. explorer: { actions: ['dragToZoom', 'rightClickToReset'] }를 사용하는 경우 직사각형 영역을 드래그하면 해당 영역이 확대됩니다. dragToZoom가 사용될 때마다 rightClickToReset를 사용하는 것이 좋습니다. 확대/축소 맞춤설정은 explorer.maxZoomIn, explorer.maxZoomOut, explorer.zoomDelta를 참고하세요.
  • rightClickToReset: 차트를 마우스 오른쪽 버튼으로 클릭하면 원래 화면 이동 및 확대/축소 수준으로 돌아갑니다.
유형: 문자열 배열
기본값: ['dragToPan', 'rightClickToReset']
explorer.axis

기본적으로 사용자는 explorer 옵션을 사용할 때 가로와 세로로 모두 이동할 수 있습니다. 사용자가 가로로만 화면 이동하도록 하려면 explorer: { axis: 'horizontal' }를 사용하세요. 마찬가지로 explorer: { axis: 'vertical' }는 세로 방향으로만 화면 이동을 사용 설정합니다.

유형: 문자열
기본: 가로 및 세로 화면 모두 이동
explorer.keepInBounds

기본적으로 사용자는 데이터의 위치와 관계없이 사방으로 이동할 수 있습니다. 사용자가 원래 차트를 벗어나지 않도록 하려면 explorer: { keepInBounds: true }를 사용하세요.

유형: 불리언
기본값: false
explorer.maxZoomIn

탐색기가 확대할 수 있는 최댓값입니다. 기본적으로 사용자는 원래 보기의 25% 만 볼 수 있을 정도로 확대할 수 있습니다. explorer: { maxZoomIn: .5 }를 설정하면 사용자는 원래 뷰의 절반이 보일 정도로만 확대할 수 있습니다.

유형: 숫자
기본값: 0.25
explorer.maxZoomOut

탐색기가 축소할 수 있는 최댓값입니다. 기본적으로 사용자는 차트가 사용 가능한 공간의 1/4만 차지할 정도로 축소할 수 있습니다. explorer: { maxZoomOut: 8 }를 설정하면 사용자가 차트가 사용 가능한 공간의 1/8만 차지할 정도로 축소할 수 있습니다.

유형: 숫자
기본값: 4
explorer.zoomDelta

사용자가 확대하거나 축소할 때 explorer.zoomDelta가 확대/축소 정도를 결정합니다. 숫자가 작을수록 확대/축소가 더 부드럽고 느려집니다.

유형: 숫자
기본값: 1.5
focusTarget

마우스를 가져가면 포커스를 받는 항목의 유형입니다. 마우스 클릭으로 선택되는 항목 및 이벤트와 연결되는 데이터 테이블 요소에도 영향을 줍니다. 다음 중 하나일 수 있습니다.

  • 'datum' - 단일 데이터 포인트에 집중합니다. 데이터 표의 셀과 연관이 있습니다.
  • 'category' - 주축을 따라 모든 데이터 요소를 그룹화하는 데 초점을 맞춥니다. 데이터 테이블의 행과 상호 연관됩니다.

초점 대상 '카테고리'의 도움말에 모든 카테고리 값이 표시됩니다. 이 방법은 서로 다른 계열의 값을 비교하는 데 유용할 수 있습니다.

유형: 문자열
기본값: 'datum'
fontSize

차트에 있는 모든 텍스트의 기본 글꼴 크기(픽셀)입니다. 특정 차트 요소의 속성을 사용하여 이를 재정의할 수 있습니다.

유형: 숫자
기본값: 자동
fontName

차트에 있는 모든 텍스트의 기본 글꼴입니다. 특정 차트 요소의 속성을 사용하여 이를 재정의할 수 있습니다.

유형: 문자열
기본값: 'Arial'
forceIFrame

인라인 프레임 안에 차트를 그립니다. IE8에서는 이 옵션이 무시되며 모든 IE8 차트가 i-프레임으로 그려집니다.

유형: 불리언
기본값: false
hAxis

다양한 가로축 요소를 구성하는 구성원이 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
유형: 객체
기본값: null
hAxis.baseline

가로축의 기준선입니다.

이 옵션은 continuous 축에만 지원됩니다.

유형: 숫자
기본값: 자동
hAxis.baselineColor

가로축의 기준선 색상입니다. 모든 HTML 색상 문자열일 수 있습니다(예: 'red' 또는 '#00cc00').

이 옵션은 continuous 축에만 지원됩니다.

유형: 숫자
기본값: 'black'
hAxis.direction

가로축의 값이 증가하는 방향입니다. 값의 순서를 반대로 바꾸려면 -1를 지정합니다.

유형: 1 또는 -1
기본값: 1
hAxis.format

숫자 또는 날짜 축 라벨의 형식 문자열입니다.

숫자 축 라벨의 경우 십진수 형식 지정 ICU 패턴 집합 의 하위 집합입니다. 예를 들어 {format:'#,###%'}은 값 10, 7.5, 0.5에 대해 '1,000%', '750%', '50%' 값을 표시합니다. 또한 다음 중 하나를 제공할 수 있습니다.

  • {format: 'none'}: 서식 없이 숫자를 표시합니다 (예: 8000000)
  • {format: 'decimal'}: 천 단위 구분 기호로 숫자를 표시합니다(예: 8,000,000개)
  • {format: 'scientific'}: 과학적 표기법 (예: 8e6)
  • {format: 'currency'}: 현지 통화로 숫자를 표시합니다(예: $8,000,000.00)
  • {format: 'percent'}: 숫자를 백분율로 표시합니다 (예: 800,000,000%).
  • {format: 'short'}: 축약된 숫자를 표시합니다 (예: 800만 회)
  • {format: 'long'}: 숫자를 전체 단어로 표시합니다 (예: 800만 개)

날짜 축 라벨의 경우 날짜 형식 지정 ICU 패턴 집합 의 하위 집합입니다. 예를 들어 {format:'MMM d, y'}는 2011년 7월 첫째 날에 대해 '2011년 7월 1일' 값을 표시합니다.

라벨에 적용된 실제 형식 지정은 API가 로드된 언어에서 파생됩니다. 자세한 내용은 특정 언어로 차트 로드 를 참고하세요.

눈금 값과 격자선을 계산할 때 관련된 모든 격자선 옵션의 여러 대체 조합이 고려되며 형식이 지정된 눈금 라벨이 중복되거나 겹치는 경우 대체 항목이 거부됩니다. 따라서 정수 틱 값만 표시하려면 format:"#"를 지정하면 됩니다. 단, 이 조건을 충족하는 대체 값이 없으면 격자선이나 틱이 표시되지 않습니다.

이 옵션은 continuous 축에만 지원됩니다.

유형: 문자열
기본값: auto
hAxis.gridlines

가로축에 격자선을 구성하는 속성이 있는 객체입니다. 가로축 격자선은 세로로 그려집니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 

{color: '#333', minSpacing: 20}

이 옵션은 continuous 축에만 지원됩니다.

유형: 객체
기본값: null
hAxis.gridlines.color

차트 영역 내 가로 격자선의 색상입니다. 유효한 HTML 색상 문자열을 지정하세요.

유형: 문자열
기본값: '#CCC'
hAxis.gridlines.count

차트 영역 내에 표시되는 가로 격자선의 대략적인 개수입니다. gridlines.count에 양수를 지정하면 격자선 사이의 minSpacing를 계산하는 데 사용됩니다. 1 값을 지정하면 격자선을 하나만 그리거나 0 값을 지정하여 격자선을 그리지 않을 수 있습니다. 다른 옵션에 따라 격자선 수를 자동으로 계산하려면 기본값인 -1을 지정합니다.

유형: 숫자
기본값: -1
hAxis.gridlines.interval

인접한 격자선 사이의 크기 배열 (픽셀이 아닌 데이터 값)입니다. 현재 이 옵션은 숫자 축에만 사용할 수 있지만 날짜 및 시간에만 사용되는 gridlines.units.<unit>.interval 옵션과 유사합니다. 선형 배율의 경우 기본값은 [1, 2, 2.5, 5]입니다. 즉, 격자선 값이 모든 단위 (1), 짝수 단위 (2) 또는 2.5 또는 5의 배수에 속할 수 있습니다. 이 값의 10배 거듭제곱도 고려됩니다 (예: [10, 20, 25, 50] 및 [.1, .2, .25, .5]). 로그 배율의 기본값은 [1, 2, 5]입니다.

유형: 1에서 10 사이의 숫자(10 제외)
기본값: 계산된
hAxis.gridlines.minSpacing

h축 주요 격자선 사이의 최소 화면 공간(픽셀)입니다. 주요 격자선의 기본값은 선형 배율의 경우 40, 로그 배율의 경우 20입니다. minSpacing가 아닌 count를 지정하면 최소 간격은 개수에서 계산됩니다. 반대로 count가 아닌 minSpacing를 지정하면 수는 minSpacing에서 계산됩니다. 둘 다 지정하면 minSpacing이 재정의됩니다.

유형: 숫자
기본값: 계산된
hAxis.gridlines.multiple

모든 격자선 및 눈금 값은 이 옵션 값의 배수여야 합니다. 간격과 달리 배수 10배의 거듭제곱은 고려되지 않습니다. 따라서 gridlines.multiple = 1를 지정하여 틱이 정수가 되도록 하거나 gridlines.multiple = 1000를 지정하여 틱이 1, 000의 배수가 되도록 할 수 있습니다.

유형: 숫자
기본값: 1
hAxis.gridlines.units

차트로 계산된 격자선과 함께 사용될 때 날짜/날짜/시간/timeofday 데이터 유형의 다양한 측면의 기본 형식을 재정의합니다. 연, 월, 일, 시간, 분, 초, 밀리초의 형식을 지정할 수 있습니다.

일반적인 형식은 다음과 같습니다.

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

자세한 내용은 날짜 및 시간에서 확인할 수 있습니다.

유형: 객체
기본값: null
hAxis.minorGridlines

hAxis.gridlines 옵션과 유사하게 가로축의 보조 격자선을 구성하는 구성원이 포함된 객체입니다.

이 옵션은 continuous 축에만 지원됩니다.

유형: 객체
기본값: null
hAxis.minorGridlines.color

차트 영역 내에 있는 보조 격자선의 색상입니다. 유효한 HTML 색상 문자열을 지정하세요.

유형: 문자열
기본값: 격자선과 배경 색상의 혼합
hAxis.minorGridlines.count

minorGridlines.count 옵션은 개수를 0으로 설정하여 보조 격자선을 사용 중지하는 경우를 제외하고 대부분 지원 중단되었습니다. 이제 보조 격자선 수는 주 격자선 (hAxis.gridlines.interval 참고)과 필요한 최소 공간(hAxis.minorGridlines.minSpacing 참고) 사이의 간격에 전적으로 의존합니다.

유형: 숫자
기본값:1
hAxis.minorGridlines.interval

minGridlines.interval 옵션은 주요 격자선 간격 옵션과 유사하지만 선택된 간격은 항상 주요 격자선 간격의 짝수 제수가 됩니다. 선형 스케일의 기본 간격은 [1, 1.5, 2, 2.5, 5]이고, 로그 스케일의 기본 간격은 [1, 2, 5]입니다.

유형: 숫자
기본값:1
hAxis.minorGridlines.minSpacing

인접한 보조 격자선 사이, 보조 격자선과 주요 격자선 사이에 필요한 최소 공간(픽셀)입니다. 기본값은 선형 배율의 경우 주요 격자선의 최소 간격의 1/2, 로그 배율의 경우 최소 간격의 1/5입니다.

유형: 숫자
기본값:계산됨
hAxis.minorGridlines.multiple

gridlines.multiple 메이저의 경우와 동일합니다.

유형: 숫자
기본값: 1
hAxis.minorGridlines.units

차트로 계산된 MinGridlines와 함께 사용될 때 날짜/날짜/시간/timeofday 데이터 유형의 다양한 측면의 기본 형식을 재정의합니다. 연, 월, 일, 시간, 분, 초, 밀리초의 형식을 지정할 수 있습니다.

일반적인 형식은 다음과 같습니다.

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

자세한 내용은 날짜 및 시간에서 확인할 수 있습니다.

유형: 객체
기본값: null
hAxis.logScale

가로축을 로그 배율로 만드는 hAxis 속성입니다 (모든 값이 양수여야 함). '예'인 경우 true로 설정합니다.

이 옵션은 continuous 축에만 지원됩니다.

유형: 불리언
기본값: false
hAxis.scaleType

가로축을 대수 배율로 만드는 hAxis 속성입니다. 다음 중 하나일 수 있습니다.

  • null - 로그 배율 조정이 수행되지 않습니다.
  • 'log' - 로그 배율 조정입니다. 음수 및 0 값은 표시되지 않습니다. 이 옵션은 hAxis: { logscale: true } 설정과 동일합니다.
  • 'mirrorLog' - 음수 값과 0 값을 표시하는 로그 배율입니다. 음수의 표시된 값은 절댓값의 로그의 음수입니다. 0에 가까운 값은 선형 배율로 표시됩니다.

이 옵션은 continuous 축에만 지원됩니다.

유형: 문자열
기본값: null
hAxis.textPosition

차트 영역을 기준으로 한 가로축 텍스트의 위치입니다. 지원되는 값: 'out', 'in', 'none'.

유형: 문자열
기본값: 'out'
hAxis.textStyle

가로축 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color은 HTML 색상 문자열(예: 'red' 또는 '#00cc00')일 수 있습니다. fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

자동으로 생성된 X축 눈금을 지정된 배열로 바꿉니다. 배열의 각 요소는 유효한 눈금 값 (예: 숫자, 날짜, 날짜/시간 또는 timeofday) 또는 객체여야 합니다. 객체인 경우 눈금 값에 관한 v 속성과 라벨로 표시할 리터럴 문자열을 포함하는 선택적 f 속성이 있어야 합니다.

재정의할 viewWindow.min 또는 viewWindow.max를 지정하지 않는 한 viewWindow는 최소 및 최대 틱을 포함하도록 자동으로 확장됩니다.

예를 들면 다음과 같습니다.

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

이 옵션은 continuous 축에만 지원됩니다.

유형: 요소의 배열
기본값: auto
hAxis.title

가로축의 제목을 지정하는 hAxis 속성입니다.

유형: 문자열
기본값: null
hAxis.titleTextStyle

가로축 제목 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. 

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color은 HTML 색상 문자열(예: 'red' 또는 '#00cc00')일 수 있습니다. fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.allowContainerBoundaryTextCutoff

false인 경우 차트 컨테이너에서 라벨을 자를 수 있도록 허용하지 않고 가장 바깥쪽에 있는 라벨을 숨깁니다. true인 경우 라벨 자르기를 허용합니다.

이 옵션은 discrete 축에만 지원됩니다.

유형: 불리언
기본값: false
hAxis.slantedText

true인 경우 축을 따라 더 많은 텍스트가 들어가도록 가로축 텍스트를 비스듬하게 그리고 false이면 가로축 텍스트를 똑바로 그립니다. 수직으로 그릴 때 텍스트에 모두 맞을 수 없는 경우 기본 동작은 경사 텍스트입니다. hAxis.textPosition가 기본값인 'out'으로 설정된 경우에만 이 옵션을 사용할 수 있습니다. 날짜 및 시간의 기본값은 false입니다.

유형: 불리언
기본값: 자동
hAxis.slantedTextAngle

비스듬하게 그려진 경우 가로축 텍스트의 각도입니다. hAxis.slantedText가 false이거나 자동 모드이고 차트에서 텍스트를 가로로 그리기로 결정한 경우 무시됩니다. 각도가 양수이면 회전은 시계 반대 방향이고, 음수인 경우 시계 방향입니다.

유형: 숫자, -90~90
기본값: 30
hAxis.maxAlternation

가로축 텍스트의 최대 수준 수입니다. 축 텍스트 라벨이 너무 복잡하면 서버에서 라벨을 서로 더 가까이 맞추기 위해 주변 라벨을 위나 아래로 이동할 수 있습니다. 이 값은 사용할 레벨 수를 지정합니다. 라벨이 겹치지 않게 맞을 수 있는 경우 서버는 더 적은 레벨을 사용할 수 있습니다. 날짜 및 시간의 기본값은 1입니다.

유형: 숫자
기본값: 2
hAxis.maxTextLines

텍스트 라벨에 허용되는 최대 행 수입니다. 라벨이 너무 길면 여러 줄에 걸쳐 있을 수 있으며 줄 수는 기본적으로 사용 가능한 공간의 높이에 따라 제한됩니다.

유형: 숫자
기본값: auto
hAxis.minTextSpacing

인접한 두 텍스트 라벨 사이에 허용되는 최소 가로 간격(픽셀)입니다. 라벨의 간격이 너무 좁거나 너무 길면 간격이 이 임계값 아래로 떨어질 수 있으며, 이 경우 라벨 정리 조치 중 하나가 적용됩니다 (예: 라벨 자르기 또는 일부 삭제).

유형: 숫자
기본값: hAxis.textStyle.fontSize의 값
hAxis.showTextEvery

표시할 가로축 라벨 수입니다. 여기서 1은 모든 라벨을, 2는 다른 모든 라벨을 표시하는 것을 의미합니다. 기본값은 겹치지 않고 가능한 한 많은 라벨을 표시하는 것입니다.

유형: 숫자
기본값: 자동
hAxis.maxValue

가로축의 최댓값을 지정된 값으로 이동합니다. 대부분의 차트에서 오른쪽으로 이동합니다. 데이터의 최대 x값보다 작은 값으로 설정되면 무시됩니다. hAxis.viewWindow.max는 이 속성을 재정의합니다.

이 옵션은 continuous 축에만 지원됩니다.

유형: 숫자
기본값: 자동
hAxis.minValue

가로축의 최솟값을 지정된 값으로 이동합니다. 대부분의 차트에서 왼쪽에 배치됩니다. 데이터의 최소 x값보다 큰 값으로 설정되면 무시됩니다. hAxis.viewWindow.min는 이 속성을 재정의합니다.

이 옵션은 continuous 축에만 지원됩니다.

유형: 숫자
기본값: 자동
hAxis.viewWindowMode

차트 영역 내에서 값을 렌더링하기 위해 가로축의 배율을 조정하는 방법을 지정합니다. 다음과 같은 문자열 값이 지원됩니다.

  • 'pretty' - 최대 및 최소 데이터 값이 차트 영역의 왼쪽과 오른쪽에서 약간 렌더링되도록 가로 값의 크기를 조정합니다. 숫자의 경우 가장 가까운 주요 격자선으로, 날짜와 시간의 경우 가장 가까운 보조 격자선으로 viewWindow를 확장합니다.
  • 'maximized' - 최대 및 최소 데이터 값이 차트 영역의 왼쪽과 오른쪽에 닿도록 가로 값을 조정합니다. 이렇게 하면 haxis.viewWindow.min 및 haxis.viewWindow.max가 무시됩니다.
  • 'explicit' - 차트 영역의 왼쪽 및 오른쪽 배율 값을 지정하기 위해 지원 중단된 옵션입니다. (haxis.viewWindow.min 및 haxis.viewWindow.max와 중복되므로 지원 중단되었습니다.) 이 값을 벗어나는 데이터 값은 잘립니다. 표시할 최댓값과 최솟값을 설명하는 hAxis.viewWindow 객체를 지정해야 합니다.

이 옵션은 continuous 축에만 지원됩니다.

유형: 문자열
기본값: 'pretty'와 동일하지만 haxis.viewWindow.min 및 haxis.viewWindow.max가 사용되는 경우 우선 적용됩니다.
hAxis.viewWindow

가로축의 자르기 범위를 지정합니다.

유형: 객체
기본값: null
hAxis.viewWindow.max

  • continuous 축:

    렌더링할 최대 가로 데이터 값입니다.

  • discrete 축:

    자르기 기간이 끝나는 0부터 시작하는 행 색인입니다. 이 색인 이상의 데이터 포인트가 잘립니다. vAxis.viewWindowMode.min와 함께 표시할 요소 색인을 나타내는 절반 열린 범위 [min, max)를 정의합니다. 즉, min <= index < max와 같은 모든 색인은 표시됩니다.

hAxis.viewWindowMode가 'pretty' 또는 'maximized'이면 무시됩니다.

유형: 숫자
기본값: auto
hAxis.viewWindow.min

  • continuous 축:

    렌더링할 최소 가로 데이터 값입니다.

  • discrete 축:

    자르기 기간이 시작되는 0부터 시작하는 행 색인입니다. 이보다 낮은 색인의 데이터 포인트가 잘립니다. vAxis.viewWindowMode.max와 함께 표시할 요소 색인을 나타내는 절반 열린 범위 [min, max)를 정의합니다. 즉, min <= index < max와 같은 모든 색인이 표시됩니다.

hAxis.viewWindowMode가 'pretty' 또는 'maximized'이면 무시됩니다.

유형: 숫자
기본값: auto
키

차트의 높이입니다(단위: 픽셀).

유형: 숫자
기본값: 포함하는 요소의 높이
isStacked

true로 설정하면 각 도메인 값에서 모든 계열의 요소를 스택합니다. 참고: 열, 영역, SteppedArea 차트에서 Google 차트는 범례 항목의 순서를 역순으로 정렬하여 계열 요소의 스택에 더 잘 부합합니다 (예: 계열 0이 맨 아래 범례 항목이 됨). 막대 차트에는 적용되지 않습니다 .

isStacked 옵션은 또한 100% 스태킹을 지원합니다. 즉, 각 도메인 값의 요소 스택이 합이 100%가 되도록 재조정됩니다.

isStacked의 옵션은 다음과 같습니다.

  • false - 요소가 쌓이지 않습니다. 기본 옵션입니다.
  • true - 각 도메인 값에서 모든 계열의 요소를 스택합니다.
  • 'percent' - 모든 계열의 요소를 각 도메인 값에서 쌓고 합이 100%가 되도록 재조정합니다. 각 요소의 값은 100%의 백분율로 계산됩니다.
  • 'relative' - 각 도메인 값에서 모든 계열의 요소를 쌓고 합이 1이 되도록 재조정합니다. 각 요소의 값은 1의 비율로 계산됩니다.
  • 'absolute': isStacked: true와 동일하게 작동합니다.

100% 스태킹의 경우 각 요소의 계산된 값이 실제 값 뒤에 도움말에 표시됩니다.

타겟 축은 기본적으로 'relative'의 경우 1의 상대적인 0~1 배율을 기반으로 하여, 'percent'의 경우 0~100% 의 비율로 틱 값을 설정합니다(참고: 'percent' 옵션을 사용하는 경우 축/틱 값은 백분율로 표시되지만 실제 값은 0~1의 상대적 배율 값입니다. 이는 백분율 축 눈금이 상대적인 0~1 배율 값에 '#.##%' 형식을 적용한 결과이기 때문입니다. isStacked: 'percent'를 사용할 때는 상대적인 0~1 배율 값을 사용하여 눈금/격자선을 지정해야 합니다. 적절한 hAxis/vAxis 옵션을 사용하여 격자선/눈금 값과 서식을 맞춤설정할 수 있습니다.

100% 스택은 number 유형의 데이터 값만 지원하며 기준은 0이어야 합니다.

유형: 불리언/문자열
기본값: false
범례

범례의 다양한 측면을 구성하는 구성원이 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
유형: 객체
기본값: null
legend.pageIndex

범례의 0부터 시작하는 초기 페이지 색인입니다.

유형: 숫자
기본값: 0
legend.position

범례의 위치입니다. 다음 중 하나일 수 있습니다.

  • 'bottom' - 차트 아래.
  • 'left' - 차트의 왼쪽. 왼쪽 축에 연결된 계열이 없는 경우. 따라서 왼쪽에 범례를 표시하려면 targetAxisIndex: 1 옵션을 사용합니다.
  • 'in' - 차트 내, 왼쪽 상단
  • '없음' - 범례가 표시되지 않습니다.
  • 'right' - 차트의 오른쪽에 위치. vAxes 옵션과 호환되지 않습니다.
  • 'top' - 차트 위
유형: 문자열
기본값: 'right'
legend.alignment

범례의 정렬 다음 중 하나일 수 있습니다.

  • 'start' - 범례에 할당된 영역의 시작 부분에 맞춰 정렬됩니다.
  • 'center' - 범례에 할당된 영역의 중앙에 배치됩니다.
  • 'end' - 범례에 할당된 영역의 끝에 맞춰 정렬됩니다.

시작, 가운데, 끝은 범례의 스타일(세로 또는 가로)을 기준으로 합니다. 예를 들어 '오른쪽' 범례에서 '시작'과 '종료'는 각각 상단과 하단에 위치합니다. '상단' 범례의 경우 '시작'과 '종료'가 각각 영역의 왼쪽과 오른쪽에 있습니다.

기본값은 범례의 위치에 따라 다릅니다. '하단' 범례의 경우 기본값은 'center'이고 다른 범례의 기본값은 'start'입니다.

유형: 문자열
기본값: 자동
legend.textStyle

범례 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color은 HTML 색상 문자열(예: 'red' 또는 '#00cc00')일 수 있습니다. fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
방향

차트의 방향입니다. 'vertical'로 설정하면 차트의 축을 회전하여 예를 들어 열 차트는 막대 그래프가 되고 영역 차트는 위쪽이 아닌 오른쪽으로 증가합니다.

유형: 문자열
기본값: 'horizontal'
reverseCategories

true로 설정하면 계열이 오른쪽에서 왼쪽으로 그려집니다. 기본값은 왼쪽에서 오른쪽으로 그리는 것입니다.

이 옵션은 discrete major 축에만 지원됩니다.

유형: 불리언
기본값: false
시리즈

객체의 배열로, 각각 차트의 해당 계열 형식을 설명합니다. 계열에 기본값을 사용하려면 빈 객체 {}를 지정합니다. 계열 또는 값이 지정되지 않은 경우 전역 값이 사용됩니다. 각 객체는 다음과 같은 속성을 지원합니다.

  • annotations - 이 시리즈의 주석에 적용할 객체입니다. 예를 들어 시리즈의 textStyle를 제어하는 데 사용할 수 있습니다. 

    series: {
  0: {
    annotations: {
      textStyle: {fontSize: 12, color: 'red' }
    }
  }
}

    맞춤설정할 수 있는 항목의 전체 목록은 다양한 annotations 옵션을 참고하세요.

  • color - 이 계열에 사용할 색상입니다. 유효한 HTML 색상 문자열을 지정하세요.
  • targetAxisIndex - 이 계열을 할당할 축입니다. 여기서 0은 기본 축이고 1은 반대 축입니다. 기본값은 0입니다. 다른 계열이 다른 축을 기준으로 렌더링되는 차트를 정의하려면 1로 설정합니다. 기본 축에 하나 이상의 계열이 할당되어야 합니다. 다른 축에 대해 다른 배율을 정의할 수 있습니다.
  • visibleInLegend - 불리언 값입니다. 여기서 true는 계열에 범례 항목이 있어야 하고 false는 없다는 것을 의미합니다. 기본값은 true입니다.

지정된 순서대로 각각이 계열에 적용되는 객체의 배열을 지정하거나 각 하위 요소에 적용되는 계열을 나타내는 숫자 키가 있는 객체를 지정할 수 있습니다. 예를 들어 다음 두 선언은 동일하며, 첫 번째 계열을 범례에 표시되지 않는 검은색으로 선언하고 네 번째 계열을 빨간색으로(범례에 없음) 선언합니다. 

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
유형: 객체의 배열 또는 중첩된 객체가 있는 객체
기본값: {}
테마

테마는 특정 차트 동작이나 시각적 효과를 달성하기 위해 함께 작동하는 사전 정의된 옵션 값의 집합입니다. 현재 하나의 테마만 사용할 수 있습니다.

  • 'maximized' - 차트의 영역을 최대화하고 차트 영역 내에 범례와 모든 라벨을 그립니다. 다음 옵션을 설정합니다. 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
유형: 문자열
기본값: null
title

차트 위에 표시할 텍스트입니다.

유형: 문자열
기본값: 제목 없음
titlePosition

차트 영역과 비교하여 차트 제목을 배치할 위치입니다. 지원되는 값:

  • in - 차트 영역 안에 제목을 그립니다.
  • out - 차트 영역 바깥에 제목을 그립니다.
  • none(없음) - 제목을 생략합니다.
유형: 문자열
기본값: 'out'
titleTextStyle

제목 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color은 HTML 색상 문자열(예: 'red' 또는 '#00cc00')일 수 있습니다. fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
도움말

다양한 도움말 요소를 구성하는 구성원이 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 

{textStyle: {color: '#FF0000'}, showColorCode: true}
유형: 객체
기본값: null
tooltip.ignoreBounds

true로 설정하면 도움말 그리기가 모든 면에서 차트 경계 외부로 흐르도록 허용합니다.

참고: 이 내용은 HTML 도움말에만 적용됩니다. SVG 도움말로 이 기능을 사용 설정하면 차트 경계 외부의 오버플로가 잘립니다. 자세한 내용은 도움말 콘텐츠 맞춤설정을 참조하세요.

유형: 불리언
기본값: false
tooltip.isHtml

true로 설정하면 SVG 렌더링이 아닌 HTML 렌더링 도움말을 사용합니다. 자세한 내용은 도움말 콘텐츠 맞춤설정을 참조하세요.

참고: 도움말 열 데이터 역할을 통한 HTML 도움말 콘텐츠의 맞춤설정은 풍선형 차트 시각화에서 지원되지 않습니다.

유형: 불리언
기본값: false
tooltip.showColorCode

true인 경우 도움말에서 계열 정보 옆에 색상이 있는 정사각형을 표시합니다. focusTarget가 'category'로 설정된 경우 기본값은 true이고, 그렇지 않은 경우 기본값은 false입니다.

유형: 불리언
기본값: 자동
tooltip.textStyle

도움말 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color은 HTML 색상 문자열(예: 'red' 또는 '#00cc00')일 수 있습니다. fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

도움말이 표시되도록 하는 사용자 상호작용입니다.

  • 'focus' - 사용자가 요소 위로 마우스를 가져가면 도움말이 표시됩니다.
  • 'none' - 도움말이 표시되지 않습니다.
  • 'selection' - 사용자가 요소를 선택하면 도움말이 표시됩니다.
유형: 문자열
기본값: 'focus'
추세선

추세선을 지원하는 차트에 추세선 을 표시합니다. 기본적으로 선형 추세선이 사용되지만 trendlines.n.type 옵션을 사용하여 맞춤설정할 수 있습니다.

추세선은 계열별로 지정되므로 대부분의 경우 다음과 같은 옵션이 표시됩니다. 

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
유형: 객체
기본값: null
trendlines.n.color

추세선 의 색상으로, 영어 색상 이름 또는 16진수 문자열로 표현됩니다.

유형: 문자열
기본값: 기본 계열 색상
trendlines.n.degree

type: 'polynomial'의 추세선 의 경우 다항식의 차수 (2차의 경우 2, 3차의 경우 3 등)입니다. (기본 수준은 향후 Google 차트의 출시 버전에서 3에서 2로 변경될 수 있습니다.)

유형: 숫자
기본값: 3
trendlines.n.labelInLegend

설정된 경우 추세선 이 범례에 이 문자열로 표시됩니다.

유형: 문자열
기본값: null
trendlines.n.lineWidth

추세선 의 선 너비(픽셀)입니다.

유형: 숫자
기본값: 2
trendlines.n.opacity

추세선 의 투명도로, 0.0 (투명)에서 1.0 (불투명)까지입니다.

유형: 숫자
기본값: 1.0
trendlines.n.pointSize

추세선 은 차트에 여러 개의 점을 스탬프로 표시하여 구성됩니다. 거의 필요하지 않은 이 옵션을 사용하면 점의 크기를 맞춤설정할 수 있습니다. 일반적으로 추세선의 lineWidth 옵션을 사용하는 것이 좋습니다. 그러나 전역 pointSize 옵션을 사용 중이고 추세선에 다른 점 크기를 원한다면 이 옵션이 필요합니다.

유형: 숫자
기본값: 1
trendlines.n.pointsVisible

추세선 은 차트에 여러 개의 점을 찍는 방식으로 구성됩니다. 추세선의 pointsVisible 옵션은 특정 추세선의 점을 표시할지 여부를 결정합니다.

유형: 불리언
기본값: true
trendlines.n.showR2

범례 또는 추세선 도움말에 결정 계수 를 표시할지 여부입니다.

유형: 불리언
기본값: false
trendlines.n.type

추세선 이 'linear' (기본값), 'exponential' 또는 'polynomial'인지 여부입니다.

유형: 문자열
기본값: 선형
trendlines.n.visibleInLegend

추세선 등식이 범례에 표시되는지 여부입니다. 추세선 도움말에 표시됩니다.

유형: 불리언
기본값: false
vAxes

차트에 여러 개의 세로 축이 있는 경우 개별 세로 축의 속성을 지정합니다. 각 하위 객체는 vAxis 객체이며 vAxis에서 지원하는 모든 속성을 포함할 수 있습니다. 이러한 속성 값은 동일한 속성의 모든 전역 설정을 재정의합니다.

여러 개의 세로축이 있는 차트를 지정하려면 먼저 series.targetAxisIndex를 사용하여 새 축을 정의한 다음 vAxes를 사용하여 축을 구성합니다. 다음 예에서는 오른쪽 축에 계열 2를 할당하고 맞춤 제목과 텍스트 스타일을 지정합니다. 

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}

이 속성은 객체 또는 배열일 수 있습니다. 객체는 각각 정의하는 축을 지정하는 숫자 라벨이 있는 객체의 모음으로, 위에 표시된 형식입니다. 배열은 축당 하나씩 객체의 배열입니다. 예를 들어 다음 배열 스타일 표기법은 위에 표시된 vAxis 객체와 동일합니다. 

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
유형: 객체의 배열 또는 하위 객체가 있는 객체
기본값: null
vAxis

다양한 세로축 요소를 구성하는 구성원이 포함된 객체입니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
유형: 객체
기본값: null
vAxis.baseline

세로축의 기준을 지정하는 vAxis 속성입니다. 기준이 가장 높은 격자선보다 크거나 가장 낮은 격자선보다 작으면 가장 가까운 격자선으로 반올림됩니다.

유형: 숫자
기본값: 자동
vAxis.baselineColor

세로축의 기준선 색상을 지정합니다. 모든 HTML 색상 문자열일 수 있습니다(예: 'red' 또는 '#00cc00').

유형: 숫자
기본값: 'black'
vAxis.direction

세로축의 값이 증가하는 방향입니다. 기본적으로 낮은 값은 차트 하단에 표시됩니다. 값의 순서를 반대로 바꾸려면 -1를 지정합니다.

유형: 1 또는 -1
기본값: 1
vAxis.format

숫자 축 라벨의 형식 문자열입니다. ICU 패턴 집합 의 하위 집합입니다. 예를 들어 {format:'#,###%'}은 값 10, 7.5, 0.5에 대해 '1,000%', '750%', '50%' 값을 표시합니다. 또한 다음 중 하나를 제공할 수 있습니다.

  • {format: 'none'}: 서식 없이 숫자를 표시합니다 (예: 8000000)
  • {format: 'decimal'}: 천 단위 구분 기호로 숫자를 표시합니다(예: 8,000,000개)
  • {format: 'scientific'}: 과학적 표기법 (예: 8e6)
  • {format: 'currency'}: 현지 통화로 숫자를 표시합니다(예: $8,000,000.00)
  • {format: 'percent'}: 숫자를 백분율로 표시합니다 (예: 800,000,000%).
  • {format: 'short'}: 축약된 숫자를 표시합니다 (예: 800만 회)
  • {format: 'long'}: 숫자를 전체 단어로 표시합니다 (예: 800만 개)

라벨에 적용된 실제 형식 지정은 API가 로드된 언어에서 파생됩니다. 자세한 내용은 특정 언어로 차트 로드 를 참고하세요.

눈금 값과 격자선을 계산할 때 관련된 모든 격자선 옵션의 여러 대체 조합이 고려되며 형식이 지정된 눈금 라벨이 중복되거나 겹치는 경우 대체 항목이 거부됩니다. 따라서 정수 틱 값만 표시하려면 format:"#"를 지정하면 됩니다. 단, 이 조건을 충족하는 대체 값이 없으면 격자선이나 틱이 표시되지 않습니다.

유형: 문자열
기본값: auto
vAxis.gridlines

세로축의 격자선을 구성하는 구성원이 포함된 객체입니다. 세로축 격자선은 가로로 그려집니다. 이 객체의 속성을 지정하려면 다음과 같이 객체 리터럴 표기법을 사용하면 됩니다. 

{color: '#333', minSpacing: 20}
유형: 객체
기본값: null
vAxis.gridlines.color

차트 영역 내 세로 격자선의 색상입니다. 유효한 HTML 색상 문자열을 지정하세요.

유형: 문자열
기본값: '#CCC'
vAxis.gridlines.count

차트 영역 내에 표시되는 가로 격자선의 대략적인 개수입니다. gridlines.count에 양수를 지정하면 격자선 사이의 minSpacing를 계산하는 데 사용됩니다. 1 값을 지정하면 격자선을 하나만 그리거나 0 값을 지정하여 격자선을 그리지 않을 수 있습니다. 다른 옵션에 따라 격자선 수를 자동으로 계산하려면 기본값인 -1을 지정합니다.

유형: 숫자
기본값: -1
vAxis.gridlines.interval

인접한 격자선 사이의 크기 배열 (픽셀이 아닌 데이터 값)입니다. 현재 이 옵션은 숫자 축에만 사용할 수 있지만 날짜 및 시간에만 사용되는 gridlines.units.<unit>.interval 옵션과 유사합니다. 선형 배율의 경우 기본값은 [1, 2, 2.5, 5]입니다. 즉, 격자선 값이 모든 단위 (1), 짝수 단위 (2) 또는 2.5 또는 5의 배수에 속할 수 있습니다. 이 값의 10배 거듭제곱도 고려됩니다 (예: [10, 20, 25, 50] 및 [.1, .2, .25, .5]). 로그 배율의 기본값은 [1, 2, 5]입니다.

유형: 1에서 10 사이의 숫자(10 제외)
기본값: 계산된
vAxis.gridlines.minSpacing

h축 주요 격자선 사이의 최소 화면 공간(픽셀)입니다. 주요 격자선의 기본값은 선형 배율의 경우 40, 로그 배율의 경우 20입니다. minSpacing가 아닌 count를 지정하면 최소 간격은 개수에서 계산됩니다. 반대로 count가 아닌 minSpacing를 지정하면 수는 minSpacing에서 계산됩니다. 둘 다 지정하면 minSpacing이 재정의됩니다.

유형: 숫자
기본값: 계산된
vAxis.gridlines.multiple

모든 격자선 및 눈금 값은 이 옵션 값의 배수여야 합니다. 간격과 달리 배수 10배의 거듭제곱은 고려되지 않습니다. 따라서 gridlines.multiple = 1를 지정하여 틱이 정수가 되도록 하거나 gridlines.multiple = 1000를 지정하여 틱이 1, 000의 배수가 되도록 할 수 있습니다.

유형: 숫자
기본값: 1
vAxis.gridlines.units

차트로 계산된 격자선과 함께 사용될 때 날짜/날짜/시간/timeofday 데이터 유형의 다양한 측면의 기본 형식을 재정의합니다. 연, 월, 일, 시간, 분, 초, 밀리초의 형식을 지정할 수 있습니다.

일반적인 형식은 다음과 같습니다.

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

자세한 내용은 날짜 및 시간에서 확인할 수 있습니다.

유형: 객체
기본값: null
vAxis.minorGridlines

vAxis.gridlines 옵션과 유사하게 세로축의 보조 격자선을 구성하는 구성원이 포함된 객체입니다.

유형: 객체
기본값: null
vAxis.minorGridlines.color

차트 영역 내에 있는 세로의 보조 격자선 색상입니다. 유효한 HTML 색상 문자열을 지정하세요.

유형: 문자열
기본값: 격자선과 배경 색상의 혼합
vAxis.minorGridlines.count

MinGridlines.count 옵션은 개수를 0으로 설정하여 보조 격자선을 사용 중지하는 경우를 제외하고는 대부분 지원 중단되었습니다. 보조 격자선 수는 주요 격자선 (vAxis.gridlines.interval 참고)과 필요한 최소 공간(vAxis.minorGridlines.minSpacing 참고) 사이의 간격에 따라 다릅니다.

유형: 숫자
기본값: 1
vAxis.minorGridlines.interval

minGridlines.interval 옵션은 주요 격자선 간격 옵션과 유사하지만 선택된 간격은 항상 주요 격자선 간격의 짝수 제수가 됩니다. 선형 스케일의 기본 간격은 [1, 1.5, 2, 2.5, 5]이고, 로그 스케일의 기본 간격은 [1, 2, 5]입니다.

유형: 숫자
기본값:1
vAxis.minorGridlines.minSpacing

인접한 보조 격자선 사이, 보조 격자선과 주요 격자선 사이에 필요한 최소 공간(픽셀)입니다. 기본값은 선형 배율의 경우 주요 격자선의 최소 간격의 1/2, 로그 배율의 경우 최소 간격의 1/5입니다.

유형: 숫자
기본값:계산됨
vAxis.minorGridlines.multiple

gridlines.multiple 메이저의 경우와 동일합니다.

유형: 숫자
기본값: 1
vAxis.minorGridlines.units

차트로 계산된 MinGridlines와 함께 사용될 때 날짜/날짜/시간/timeofday 데이터 유형의 다양한 측면의 기본 형식을 재정의합니다. 연, 월, 일, 시간, 분, 초, 밀리초의 형식을 지정할 수 있습니다.

일반적인 형식은 다음과 같습니다.

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

자세한 내용은 날짜 및 시간에서 확인할 수 있습니다.

유형: 객체
기본값: null
vAxis.logScale

true인 경우 세로축이 로그 배율이 됩니다. 참고: 모든 값은 양수여야 합니다.

유형: 불리언
기본값: false
vAxis.scaleType

세로축을 로그 배율로 만드는 vAxis 속성입니다. 다음 중 하나일 수 있습니다.

  • null - 로그 배율 조정이 수행되지 않습니다.
  • 'log' - 로그 배율 조정입니다. 음수 및 0 값은 표시되지 않습니다. 이 옵션은 vAxis: { logscale: true } 설정과 동일합니다.
  • 'mirrorLog' - 음수 값과 0 값을 표시하는 로그 배율입니다. 음수의 표시된 값은 절댓값의 로그의 음수입니다. 0에 가까운 값은 선형 배율로 표시됩니다.

이 옵션은 continuous 축에만 지원됩니다.

유형: 문자열
기본값: null
vAxis.textPosition

차트 영역을 기준으로 한 세로축 텍스트의 위치입니다. 지원되는 값: 'out', 'in', 'none'.

유형: 문자열
기본값: 'out'
vAxis.textStyle

세로축 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color은 HTML 색상 문자열(예: 'red' 또는 '#00cc00')일 수 있습니다. fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

자동으로 생성된 Y축 눈금을 지정된 배열로 바꿉니다. 배열의 각 요소는 유효한 눈금 값 (예: 숫자, 날짜, 날짜/시간 또는 timeofday) 또는 객체여야 합니다. 객체인 경우 눈금 값에 관한 v 속성과 라벨로 표시할 리터럴 문자열을 포함하는 선택적 f 속성이 있어야 합니다.

재정의할 viewWindow.min 또는 viewWindow.max를 지정하지 않는 한 viewWindow는 최소 및 최대 틱을 포함하도록 자동으로 확장됩니다.

예를 들면 다음과 같습니다.

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
유형: 요소의 배열
기본값: auto
vAxis.title

세로축의 제목을 지정하는 vAxis 속성입니다.

유형: 문자열
기본값: 제목 없음
vAxis.titleTextStyle

세로축 제목 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color은 HTML 색상 문자열(예: 'red' 또는 '#00cc00')일 수 있습니다. fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

세로축의 최댓값을 지정된 값으로 이동합니다. 대부분의 차트에서 위쪽으로 이동합니다. 데이터의 최대 y값보다 작은 값으로 설정되면 무시됩니다. vAxis.viewWindow.max는 이 속성을 재정의합니다.

유형: 숫자
기본값: 자동
vAxis.minValue

세로축의 최솟값을 지정된 값으로 이동합니다. 대부분의 차트에서 아래쪽에 위치합니다. 데이터의 최소 y값보다 큰 값으로 설정되면 무시됩니다. vAxis.viewWindow.min는 이 속성을 재정의합니다.

유형: 숫자
기본값: null
vAxis.viewWindowMode

차트 영역 내에서 값을 렌더링하기 위해 세로축 배율을 조정하는 방법을 지정합니다. 다음과 같은 문자열 값이 지원됩니다.

  • 'pretty' - 최대 및 최소 데이터 값이 차트 영역의 하단과 상단 안쪽에서 약간 렌더링되도록 세로 값을 조정합니다. 숫자의 경우 가장 가까운 주요 격자선으로, 날짜와 시간의 경우 가장 가까운 보조 격자선으로 viewWindow를 확장합니다.
  • 'maximized' - 최대 및 최소 데이터 값이 차트 영역의 상단과 하단에 닿도록 세로 값을 조정합니다. 이렇게 하면 vaxis.viewWindow.min 및 vaxis.viewWindow.max가 무시됩니다.
  • '명시적' - 차트 영역의 최고 및 최저 배율 값을 지정하기 위한 지원 중단된 옵션입니다. vaxis.viewWindow.min 및 vaxis.viewWindow.max와 중복되므로 지원 중단되었습니다. 이 값을 벗어나는 데이터 값은 잘립니다. 표시할 최댓값과 최솟값을 설명하는 vAxis.viewWindow 객체를 지정해야 합니다.
유형: 문자열
기본값: 'pretty'와 동일하지만 vaxis.viewWindow.min 및 vaxis.viewWindow.max가 사용되는 경우 우선 적용됩니다.
vAxis.viewWindow

세로축의 자르기 범위를 지정합니다.

유형: 객체
기본값: null
vAxis.viewWindow.max

렌더링할 최대 카테고리 데이터 값입니다.

vAxis.viewWindowMode가 'pretty' 또는 'maximized'이면 무시됩니다.

유형: 숫자
기본값: auto
vAxis.viewWindow.min

렌더링할 최소 카테고리 데이터 값입니다.

vAxis.viewWindowMode가 'pretty' 또는 'maximized'이면 무시됩니다.

유형: 숫자
기본값: auto
너비

차트의 너비입니다(단위: 픽셀).

유형: 숫자
기본값: 포함하는 요소의 너비

메서드

메서드
draw(data, options)

차트를 그립니다. 차트에서는 ready 이벤트가 실행된 후에만 추가 메서드 호출을 허용합니다. Extended description.

반환 유형: 없음
getAction(actionID)

요청된 actionID가 있는 도움말 작업 객체를 반환합니다.

반환 유형: 객체
getBoundingBox(id)

차트 요소 id의 왼쪽, 상단, 너비, 높이를 포함하는 객체를 반환합니다. id의 형식은 아직 문서화되지 않았지만 (이벤트 핸들러의 반환 값임) 다음은 몇 가지 예입니다.

var cli = chart.getChartLayoutInterface();

차트 영역의 높이
cli.getBoundingBox('chartarea').height
막대 또는 열 차트의 첫 번째 계열에서 세 번째 막대의 너비
cli.getBoundingBox('bar#0#2').width
원형 차트 다섯 번째 웨지의 경계 상자
cli.getBoundingBox('slice#4')
세로형 (예: 열) 차트 차트 데이터 경계 상자:
cli.getBoundingBox('vAxis#0#gridline')
가로 (예: 막대) 차트 차트 데이터 경계 상자:
cli.getBoundingBox('hAxis#0#gridline')

값은 차트의 컨테이너를 기준으로 합니다. 차트를 그린 후에 이 메서드를 호출합니다.

반환 유형: 객체
getChartAreaBoundingBox()

차트 콘텐츠의 왼쪽, 상단, 너비, 높이를 포함하는 객체를 반환합니다(예: 라벨 및 범례 제외).

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

값은 차트의 컨테이너를 기준으로 합니다. 차트를 그린 후에 이 메서드를 호출합니다.

반환 유형: 객체
getChartLayoutInterface()

차트 및 요소의 화면 배치에 관한 정보가 포함된 객체를 반환합니다.

반환된 객체에서 다음 메서드를 호출할 수 있습니다.

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

차트를 그린 후에 이 메서드를 호출합니다.

반환 유형: 객체
getHAxisValue(xPosition, optional_axis_index)

차트 컨테이너의 왼쪽 가장자리로부터의 픽셀 오프셋인 xPosition의 가로 데이터 값을 반환합니다. 음수일 수 있습니다.

예: chart.getChartLayoutInterface().getHAxisValue(400)

차트를 그린 후에 이 메서드를 호출합니다.

반환 유형: 숫자
getImageURI()

이미지 URI로 직렬화된 차트를 반환합니다.

차트를 그린 후에 이 메서드를 호출합니다.

PNG 차트 인쇄를 참조하세요.

반환 유형: 문자열
getSelection()

선택된 차트 항목의 배열을 반환합니다. 선택 가능한 개체는 막대, 범례 항목 및 카테고리입니다. 막대는 데이터 테이블의 셀, 열의 범례 항목 (행 색인은 null), 행의 카테고리 (열 색인은 null)에 해당합니다. 이 차트에서는 특정 시점에 하나의 항목만 선택할 수 있습니다. Extended description

반환 유형: 선택 요소의 배열
getVAxisValue(yPosition, optional_axis_index)

yPosition의 세로 데이터 값을 반환합니다. 이 값은 차트 컨테이너의 상단 가장자리로부터 아래 방향으로 픽셀 오프셋입니다. 음수일 수 있습니다.

예: chart.getChartLayoutInterface().getVAxisValue(300)

차트를 그린 후에 이 메서드를 호출합니다.

반환 유형: 숫자
getXLocation(dataValue, optional_axis_index)

차트 컨테이너의 왼쪽 가장자리를 기준으로 dataValue의 픽셀 x 좌표를 반환합니다.

예: chart.getChartLayoutInterface().getXLocation(400)

차트를 그린 후에 이 메서드를 호출합니다.

반환 유형: 숫자
getYLocation(dataValue, optional_axis_index)

차트 컨테이너의 상단 가장자리를 기준으로 dataValue의 픽셀 y 좌표를 반환합니다.

예: chart.getChartLayoutInterface().getYLocation(300)

차트를 그린 후에 이 메서드를 호출합니다.

반환 유형: 숫자
removeAction(actionID)

요청된 actionID가 있는 도움말 작업을 차트에서 삭제합니다.

반환 유형: none
setAction(action)

사용자가 작업 텍스트를 클릭할 때 실행할 도움말 작업을 설정합니다.

setAction 메서드는 객체를 작업 매개변수로 사용합니다. 이 객체는 세 가지 속성을 지정해야 합니다. id(설정 중인 작업의 ID), text(작업 도움말에 표시되어야 하는 텍스트), action(사용자가 작업 텍스트를 클릭할 때 실행해야 하는 함수)입니다.

차트의 draw() 메서드를 호출하기 전에 모든 도움말 작업을 설정해야 합니다. 확장된 설명.

반환 유형: none
setSelection()

지정된 차트 항목을 선택합니다. 이전 선택을 취소합니다. 선택 가능한 개체는 막대, 범례 항목 및 카테고리입니다. 막대는 데이터 테이블의 셀, 열의 범례 항목 (행 색인은 null), 행의 카테고리 (열 색인은 null)에 해당합니다. 이 차트에서는 한 번에 하나의 항목만 선택할 수 있습니다. Extended description

반환 유형: 없음
clearChart()

차트를 지우고 할당된 리소스를 모두 해제합니다.

반환 유형: 없음

이벤트

이러한 이벤트를 사용하는 방법에 관한 자세한 내용은 기본 상호작용, 이벤트 처리, 이벤트 실행을 참고하세요.

이름
animationfinish

전환 애니메이션이 완료되면 실행됩니다.

속성: 없음
click

사용자가 차트 내부를 클릭하면 실행됩니다. 제목, 데이터 요소, 범례 항목, 축, 격자선, 라벨을 언제 클릭했는지 식별하는 데 사용할 수 있습니다.

속성: targetID
error

차트를 렌더링하려고 시도할 때 오류가 발생하면 실행됩니다.

속성: ID, 메시지
legendpagination

사용자가 범례 페이지로 나누기 화살표를 클릭하면 실행됩니다. 0을 기반으로 하는 현재의 범례 페이지 색인과 총 페이지 수를 전달합니다.

속성: currentPageIndex, totalPages
onmouseover

사용자가 시각적 항목 위로 마우스를 가져가면 실행됩니다. 해당 데이터 테이블 요소의 행과 열 색인을 다시 전달합니다.

속성: 행, 열
onmouseout

사용자가 시각적 항목에서 마우스 멀어질 때 실행됩니다. 해당 데이터 테이블 요소의 행과 열 색인을 다시 전달합니다.

속성: 행, 열
ready

차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트의 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다.

속성: 없음
select

사용자가 시각적 항목을 클릭하면 실행됩니다. 어떤 항목이 선택되었는지 알아보려면 getSelection()를 호출하세요.

속성: 없음

데이터 정책

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