시각화: 분산형 차트

개요

분산형 차트는 그래프에 점을 나타내는 역할을 합니다. 사용자가 포인트 위로 마우스를 가져가면 자세한 정보와 함께 도움말이 표시됩니다.

Google 분산형 차트는 브라우저 기능에 따라 SVG 또는 VML을 사용하여 브라우저 내에서 렌더링됩니다.

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

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

도형 변경 및 애니메이션 적용

기본적으로 분산형 차트는 데이터 세트의 요소를 원으로 나타냅니다. 점 맞춤설정 문서에 설명된 대로 pointShape 옵션을 사용하여 다른 도형을 지정할 수 있습니다.

대부분의 다른 Google 차트와 마찬가지로 이벤트를 사용하여 애니메이션을 적용할 수 있습니다. 첫 번째 ready 이벤트에 대한 이벤트 리스너를 추가하고 원하는 대로 수정한 후 차트를 다시 그릴 수 있습니다. 첫 번째 ready 이벤트 후에 animationfinish 이벤트를 수신 대기하여 프로세스를 반복하면 애니메이션이 계속 실행됩니다. animation 옵션은 즉시 그리기(애니메이션 없음) 또는 부드럽게 그리고 어떤 동작이 얼마나 빠르고 원활하게 이루어지는지 제어합니다.

좋은 부분
  var options = {
    legend: 'none',
    colors: ['#087037'],
    pointShape: 'star',
    pointSize: 18,
    animation: {
      duration: 200,
      easing: 'inAndOut',
    }
  };

  // Start the animation by listening to the first 'ready' event.
  google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

  // Control all other animations by listening to the 'animationfinish' event.
  google.visualization.events.addListener(chart, 'animationfinish', randomWalk);
  ...
  function randomWalk() {
    ...
  }
전체 HTML
<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(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('number');
      data.addColumn('number');

      var radius = 100;
      for (var i = 0; i < 6.28; i += 0.1) {
        data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);
      }

      // Our central point, which will jiggle.
      data.addRow([0, 0]);

      var options = {
        legend: 'none',
        colors: ['#087037'],
        pointShape: 'star',
        pointSize: 18,
        animation: {
          duration: 200,
          easing: 'inAndOut',
        }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div'));

      // Start the animation by listening to the first 'ready' event.
      google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

      // Control all other animations by listening to the 'animationfinish' event.
      google.visualization.events.addListener(chart, 'animationfinish', randomWalk);

      chart.draw(data, options);

      function randomWalk() {
        var x = data.getValue(data.getNumberOfRows() - 1, 0);
        var y = data.getValue(data.getNumberOfRows() - 1, 1);
        x += 5 * (Math.random() - 0.5);
        y += 5 * (Math.random() - 0.5);
        if (x * x + y * y > radius * radius) {
          // Out of bounds. Bump toward center.
          x += Math.random() * ((x < 0) ? 5 : -5);
          y += Math.random() * ((y < 0) ? 5 : -5);
        }
        data.setValue(data.getNumberOfRows() - 1, 0, x);
        data.setValue(data.getNumberOfRows() - 1, 1, y);
        chart.draw(data, options);
      }
    }
  </script>
  </head>
  <body>
    <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div>
  </body>
</html>

머티리얼 분산형 차트 만들기

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

머티리얼 분산형 차트를 만드는 것은 '기본' 분산형 차트라고 부르는 것과 비슷합니다. Google 시각화 API를 로드하고 ('corechart' 패키지 대신 'scatter' 패키지 사용) 데이터 테이블을 정의한 후 객체를 만듭니다(google.visualization.ScatterChart 대신 google.charts.Scatter 클래스).

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

머티리얼 분산형 차트에서는 겹치는 가독성을 위한 가변 불투명도, 색상 팔레트 개선, 명확한 라벨 형식 지정, 기본 간격 좁게, 부드러운 그리드선 및 제목(및 자막 추가) 등 기본 분산형 차트에 비해 많은 부분이 개선되었습니다.

      google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67], [1, 88], [2, 77],
          [3, 93], [4, 85], [5, 91],
          [6, 71], [7, 78], [8, 93],
          [9, 80], [10, 82],[0, 75],
          [5, 80], [3, 90], [1, 72],
          [5, 75], [6, 68], [7, 98],
          [3, 82], [9, 94], [2, 79],
          [2, 95], [2, 86], [3, 67],
          [4, 60], [2, 80], [6, 92],
          [2, 81], [8, 79], [9, 83],
          [3, 75], [1, 80], [3, 71],
          [3, 89], [4, 92], [5, 85],
          [6, 92], [7, 78], [6, 95],
          [3, 81], [0, 64], [4, 85],
          [2, 83], [3, 96], [4, 77],
          [5, 89], [4, 89], [7, 84],
          [4, 92], [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          hAxis: {title: 'Hours Studied'},
          vAxis: {title: 'Grade'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

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

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

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

chart.draw(data, options);

...다음으로 대체:

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

이중 Y 차트

경우에 따라 분산형 차트에서 두 개의 독립적인 y축, 즉 한 계열의 왼쪽 축과 다른 축의 오른쪽 축을 각각 두 개 표시할 수 있습니다.

2개의 y축에는 각각 다른 라벨('최종 시험 성적'과 '학습한 시간')이 지정되어 있을 뿐만 아니라 각각의 자체 체중계와 격자선도 있습니다. 이 동작을 맞춤설정하려면 vAxis.gridlines 옵션을 사용하세요.

아래 코드에서 axesseries 옵션은 함께 차트의 이중 Y 모양을 지정합니다. series 옵션은 각각에 사용할 축을 지정합니다('final grade''hours studied'. 데이터 테이블의 열 이름과는 관계없음). 그러면 axes 옵션은 이 차트를 이중 Y 차트로 만들어 'Final Exam Grade' 축을 왼쪽에, 'Hours Studied' 축을 오른쪽에 배치합니다.

      google.charts.load('current', {'packages':['corechart', 'scatter']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

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

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Student ID');
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
          [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
          [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
          [9, 9, 80],  [10, 10, 82], [11, 0, 75],
          [12, 5, 80], [13, 3, 90],  [14, 1, 72],
          [15, 5, 75], [16, 6, 68],  [17, 7, 98],
          [18, 3, 82], [19, 9, 94],  [20, 2, 79],
          [21, 2, 95], [22, 2, 86],  [23, 3, 67],
          [24, 4, 60], [25, 2, 80],  [26, 6, 92],
          [27, 2, 81], [28, 8, 79],  [29, 9, 83]
        ]);

        var materialOptions = {
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          width: 800,
          height: 500,
          series: {
            0: {axis: 'hours studied'},
            1: {axis: 'final grade'}
          },
          axes: {
            y: {
              'hours studied': {label: 'Hours Studied'},
              'final grade': {label: 'Final Exam Grade'}
            }
          }
        };

        var classicOptions = {
          width: 800,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Students\' Final Grades - based on hours studied',

          vAxes: {
            // Adds titles to each axis.
            0: {title: 'Hours Studied'},
            1: {title: 'Final Exam Grade'}
          }
        };

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

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

        drawMaterialChart();
    };

상위 X개 차트

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

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

      google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67],  [1, 88],  [2, 77],
          [3, 93],  [4, 85],  [5, 91],
          [6, 71],  [7, 78],  [8, 93],
          [9, 80],  [10, 82], [0, 75],
          [5, 80],  [3, 90],  [1, 72],
          [5, 75],  [6, 68],  [7, 98],
          [3, 82],  [9, 94],  [2, 79],
          [2, 95],  [2, 86],  [3, 67],
          [4, 60],  [2, 80],  [6, 92],
          [2, 81],  [8, 79],  [9, 83],
          [3, 75],  [1, 80],  [3, 71],
          [3, 89],  [4, 92],  [5, 85],
          [6, 92],  [7, 78],  [6, 95],
          [3, 81],  [0, 64],  [4, 85],
          [2, 83],  [3, 96],  [4, 77],
          [5, 89],  [4, 89],  [7, 84],
          [4, 92],  [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          axes: {
            x: {
              0: {side: 'top'}
            }
          }
        };

        var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

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

로드 중

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

  google.charts.load("current", {packages: ["corechart"]});
  var visualization = new google.visualization.ScatterChart(container);

머티리얼 분산형 차트의 경우 google.charts.load 패키지 이름은 "scatter"이고 시각화의 클래스 이름은 google.charts.Scatter입니다.

  google.charts.load("current", {packages: ["scatter"]});
  var visualization = new google.charts.Scatter(container);

데이터 형식

행: 표의 각 행은 동일한 x축 값이 있는 데이터 포인트 집합을 나타냅니다.

열:

  열 0 열 1 ... N
목적: 데이터 포인트 X 값 시리즈 1 Y 값 ... 계열 N Y 값
데이터 유형: 문자열, 숫자, 날짜/날짜/시간, 날짜 문자열, 숫자, 날짜/날짜/시간, 날짜 ... 문자열, 숫자, 날짜/날짜/시간, 날짜
역할: 데이터 데이터 ... 데이터
열 역할(선택사항):

없음

...

여러 계열을 지정하려면 Y축 열을 두 개 이상 지정하고 하나의 Y열에만 Y값을 지정합니다.

X값 시리즈 1 Y 값 시리즈 2 Y 값
10 null 75
20 null 18
33 null 22
55 16 null
14 61 null
48 3 null

 

구성 옵션

이름
집계 타겟
여러 데이터 선택이 도움말로 롤업되는 방식:
  • 'category': 선택한 데이터를 x값별로 그룹화합니다.
  • 'series': 선택한 데이터를 계열별로 그룹화합니다.
  • 'auto': 모든 선택 항목이 동일한 x값을 갖는 경우 선택된 데이터를 x값으로 그룹화하고, 그렇지 않은 경우 계열별로 그룹화합니다.
  • 'none': 선택당 하나의 도움말만 표시합니다.
aggregationTarget는 종종 selectionModetooltip.trigger와 함께 사용됩니다.예를 들면 다음과 같습니다.
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
    
유형: 문자열
기본값: 'auto'
애니메이션 재생 시간

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

유형: 숫자
기본값: 0
애니메이션.이징

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

  • 'linear' - 일정한 속도입니다.
  • 'in' - ease in - 천천히 시작하여 속도를 높입니다.
  • '아웃' - 이즈 아웃 - 빠르게 시작하고 속도를 줄입니다.
  • '안드로이드' - 이즈 인/아웃 - 천천히 시작해서 속도를 높이거나 낮춥니다.
유형: 문자열
기본값: 'linear'
애니메이션 시작 모드

최초 그리기 시 차트에 애니메이션을 적용할지 결정합니다. true이면 차트는 기준에서 시작하여 최종 상태로 애니메이션 처리됩니다.

유형: 부울
기본값 false
annotation.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
annotation.datum
주석을 지원하는 차트의 경우 annotations.datum 객체를 사용하면 개별 데이터 요소에 제공되는 주석 (예: 막대 그래프의 각 막대에 표시된 값)에 대한 Google 차트의 선택을 재정의할 수 있습니다. 색상은 annotations.datum.stem.color로, 스템 길이는 annotations.datum.stem.length로, 스타일을 annotations.datum.style로 제어할 수 있습니다.
유형: 객체
기본값: 색상은 'black', 길이는 12, 스타일은 'point'입니다.
annotation.domain
주석을 지원하는 차트의 경우 annotations.domain 객체를 사용하면 도메인에 제공된 주석 (일반적인 선 차트의 X축과 같은 차트의 주요 축)에 대한 Google 차트의 선택을 재정의할 수 있습니다. 색상은 annotations.domain.stem.color로, 스템 길이는 annotations.domain.stem.length로, 스타일을 annotations.domain.style로 제어할 수 있습니다.
유형: 객체
기본값: 색상은 '검은색', 길이는 5, 스타일은 '포인트'
annotation.highContrast
주석을 지원하는 차트의 경우 annotations.highContrast 부울을 사용하면 Google 차트의 주석 색상 선택을 재정의할 수 있습니다. 기본적으로 annotations.highContrast가 true이므로 차트가 대비가 높은 주석 색상을 선택합니다(어두운 배경은 밝은 색상, 밝은 색상은 어두운 색상). annotations.highContrast를 false로 설정하고 주석 색상을 지정하지 않으면 Google 차트에서 주석의 기본 계열 색상을 사용합니다.
유형: 부울
기본값: true
annotation.stem
주석을 지원하는 차트의 경우 annotations.stem 객체를 사용하면 Google 차트에서 스템 스타일 선택을 재정의할 수 있습니다. 색상은 annotations.stem.color로, 줄기 길이는 annotations.stem.length로 제어할 수 있습니다. 스템 길이 옵션은 'line' 스타일의 주석에 영향을 미치지 않습니다. 'line' 데이텀 주석의 경우 스템 길이는 항상 텍스트와 동일하며 'line' 도메인 주석의 경우 스템이 전체 차트로 확장됩니다.
유형: 객체
기본값: 색상은 '검은색', 도메인 주석의 경우 5, 데이텀 주석의 경우 12입니다.
annotation.style
주석을 지원하는 차트의 경우 annotations.style 옵션을 사용하면 Google 차트의 주석 유형 선택을 재정의할 수 있습니다. 'line' 또는 'point'일 수 있습니다.
유형: 문자열
기본값: '포인트'
annotation.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
축 제목 위치

차트 영역과 비교한 축 제목의 위치입니다. 지원 값:

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

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

유형: 문자열 또는 객체
기본값: 'white'
배경 색상.획

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

유형: 문자열
기본값: '#666'
배경 색상.획 너비

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

유형: 숫자
기본값: 0
배경 색상.채우기

차트 채우기 색상이 HTML 색상 문자열로 표시됩니다.

유형: 문자열
기본값: 'white'
차트.제목

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

유형: 문자열
기본값: null
차트.부제목

Material 차트의 경우 이 옵션은 부제목을 지정합니다. Material 차트에서만 자막을 지원합니다.

유형: 문자열
기본값: null
차트 영역

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

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

왼쪽 테두리에서 차트를 그리는 거리

유형: 숫자 또는 문자열
기본값: 자동
차트 영역.top

위쪽 테두리에서 차트를 그리는 거리

유형: 숫자 또는 문자열
기본값: 자동
차트 영역 너비

차트 영역 너비

유형: 숫자 또는 문자열
기본값: 자동
차트 영역

차트 영역 높이를 나타냅니다.

유형: 숫자 또는 문자열
기본값: 자동
색상

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

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

차트의 crosshair 속성이 포함된 객체입니다.

유형: 객체
기본값: null
십자선.color

십자선 색상으로, 색상 이름 (예: 'blue') 또는 RGB 값(예: '#adf').

유형: 문자열
유형: 기본값
십자선

포커스 시 십자선 속성이 포함된 객체입니다.
예: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

유형: 객체
기본값: 기본값
crosshair.opacity

십자선 불투명도로, 0.0는 완전히 투명하고 1.0는 완전히 불투명합니다.

유형: 숫자
기본값: 1.0
Crosshair.orientation

십자선 방향은 세로 머리에만 '세로', 가로 머리에만 '가로', 기존 십자선에 '둘 다'일 수 있습니다.

유형: 문자열
기본값: '둘 다'
십자선.선택됨

선택 시 십자선 속성이 포함된 객체입니다.
예: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

유형: 객체
기본값: 기본값
crosshair.trigger

십자선을 표시할 시점: 'focus', 'selection' 또는 'both'

유형: 문자열
기본값: '둘 다'
곡선 유형

선 너비가 0이 아닌 경우 선의 곡선을 제어합니다. 다음 중 하나일 수 있습니다.

  • 'none' - 곡선이 없는 직선입니다.
  • 'function' - 선의 각도가 부드러워집니다.
유형: 문자열
기본값: '없음'
데이터 불투명도

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

유형: 숫자
기본값: 1.0
enableInteractivity

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

유형: 부울
기본값: true
익스플로러

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

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

참고: 탐색기는 연속 축 (예: 숫자 또는 날짜)으로만 작동합니다.

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

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

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

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

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

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

유형: 부울
기본값: false
explorer.maxZoomIn

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

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

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

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

사용자가 확대하거나 축소하는 경우 explorer.zoomDelta에 따라 확대/축소 수준이 결정됩니다. 숫자가 작을수록 더 매끄러워지고 확대/축소 속도가 느려집니다.

유형: 숫자
기본값: 1.5
fontSize

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

유형: 숫자
기본값: 자동
글꼴 이름

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

유형: 문자열
기본값: 'Arial'
강제 IFrame

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

유형: 부울
기본값: false

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

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

가로축의 기준선입니다.

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

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

유형: 숫자
기본값: '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'}: 천 단위 구분자가 있는 숫자(예: 800만 회)
  • {format: 'scientific'}: 과학적 표기법의 숫자 (예: 8e6)
  • {format: 'currency'}: 현지 통화(예: $8,000,000.00)
  • {format: 'percent'}: 숫자를 백분율로 표시합니다 (예: 800,000,000%
  • {format: 'short'}: 축약된 숫자 (예: 8M)
  • {format: 'long'}: 숫자를 전체 단어 (예: 800만)

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

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

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

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

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

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

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

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

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

차트로 계산한 그리드와 함께 사용하는 경우 날짜/날짜/날짜/시간 데이터 유형의 다양한 측면에서 기본 형식을 재정의합니다. 연도, 월, 일, 시간, 분, 초, 밀리초의 형식을 지정할 수 있습니다.

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

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 옵션과 유사하게 가로 축에서 보조 그리드를 구성하는 구성원이 있는 객체입니다.

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

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

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

minorGridlines.count 옵션은 대부분 지원 중단됩니다. 단, 개수를 0으로 설정하여 보조 그리드를 사용 중지합니다. 보조 격자선의 수는 이제 주요 격자선 (hAxis.gridlines.interval 참고)과 필요한 최소 공간(hAxis.minorGridlines.minSpacing 참조) 사이의 간격에 따라 완전히 달라집니다.

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

차트에서 생성된 smallGridlines와 함께 사용할 경우 날짜/날짜/시간/날짜 데이터 유형의 다양한 측면에 대한 기본 형식을 재정의합니다. 연도, 월, 일, 시간, 분, 초, 밀리초의 형식을 지정할 수 있습니다.

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

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로 설정하면 됩니다.

유형: 부울
기본값: false
hAxis.scaleType

hAxis 속성을 사용하여 가로축을 로그 배율로 설정합니다. 다음 중 하나일 수 있습니다.

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

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

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

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

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

color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontNamefontSize도 참고하세요.

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

자동으로 생성된 X축 틱을 지정된 배열로 대체합니다. 배열의 각 요소는 유효한 시간 표시 값 (예: 숫자, 날짜, 날짜/시간 또는 시간) 또는 객체여야 합니다. 객체인 경우 틱 값의 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] }
유형: 요소 배열
기본값: 자동
hAxis.title

가로축의 제목을 지정하는 hAxis 속성

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

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

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

color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontNamefontSize도 참고하세요.

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

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

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

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

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

차트 영역 내의 값을 렌더링하도록 가로축의 크기를 조정하는 방법을 지정합니다. 다음과 같은 문자열 값이 지원됩니다.

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

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

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

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

hAxis.viewWindowMode가 'pretty' 또는 'maximized'인 경우 무시됩니다.

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

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

hAxis.viewWindowMode가 'pretty' 또는 'maximized'인 경우 무시됩니다.

유형: 숫자
기본값: 자동
높이

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

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

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

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

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

  • 'start' - 범례에 할당된 영역의 시작 부분에 맞춰 정렬됩니다.
  • 'center' - 범례에 할당된 영역을 중심으로 합니다.
  • 'end' - 범례에 할당된 영역의 끝 부분에 맞춰 정렬됩니다.

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

기본값은 범례의 위치에 따라 다릅니다. '하단' 범례의 기본값은 '가운데'이고 다른 범례의 기본값은 '시작'입니다.

유형: 문자열
기본값: 자동
범례.maxLines

범례의 최대 행 수입니다. 범례에 선을 추가하려면 이 값을 1보다 큰 수로 설정하세요. 참고: 렌더링된 실제 선 수를 결정하는 데 사용되는 정확한 로직은 여전히 유동적입니다.

이 옵션은 현재 범례가 '위'에 있는 경우에만 작동합니다.

유형: 숫자
기본값: 1
범례.pageIndex

범례의 처음 선택한 0 기반 페이지 색인입니다.

유형: 숫자
기본값: 0
범례.position

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

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

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

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

color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontNamefontSize도 참고하세요.

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

선의 너비(픽셀)입니다. 0을 사용하여 모든 선을 숨기고 점만 표시합니다.

유형: 숫자
기본값: 0
방향

차트의 방향입니다. 'vertical'로 설정된 경우, 예를 들어 열 차트가 막대 그래프가 되고 영역 차트가 위쪽이 아닌 오른쪽으로 확장되도록 차트의 축을 회전합니다.

유형: 문자열
기본값: '수평'
점 형태

개별 데이터 요소의 모양: '원', '삼각형', '정사각형', '다이아몬드', '별', '다각형' 예시는 포인트 문서를 참고하세요.

유형: 문자열
기본값: '서클'
포인트 사이즈

데이터 포인트의 지름(픽셀 단위) 모든 지점을 숨기려면 0을 사용하세요. series 속성을 사용하여 개별 시리즈 값을 재정의할 수 있습니다. 추세선을 사용 중인 경우 이 옵션을 구성하는 포인트의 pointSize에도 영향을 주므로 추세선의 겉보기 너비가 변경됩니다. 이를 방지하려면 trendlines.n.pointsize 옵션을 사용하여 재정의할 수 있습니다.

유형: 숫자
기본값: 7
포인트 표시

포인트 표시 여부를 결정합니다. 모든 지점을 숨기려면 false로 설정합니다. series 속성을 사용하여 개별 시리즈 값을 재정의할 수 있습니다. trendline을 사용 중인 경우 pointsVisible 옵션을 trendlines.n.pointsVisible 옵션으로 재정의하지 않는 한 모든 추세선의 포인트 표시 여부에 영향을 미칩니다.

이는 "point {visible: true}" 형식의 스타일 역할을 사용하여 재정의할 수도 있습니다.

유형: 부울
기본값: true
선택 모드

selectionMode'multiple'이면 사용자는 여러 데이터 포인트를 선택할 수 있습니다.

유형: 문자열
기본값: 'single'
시리즈

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

  • color - 이 시리즈에 사용할 색상입니다. 유효한 HTML 색상 문자열을 지정하세요.
  • labelInLegend - 차트 범례에 표시될 계열의 설명입니다.
  • lineWidth - 이 시리즈의 전역 lineWidth 값을 재정의합니다.
  • pointShape - 이 시리즈의 전역 pointShape 값을 재정의합니다.
  • pointSize - 이 시리즈의 전역 pointSize 값을 재정의합니다.
  • pointsVisible - 이 시리즈의 전역 pointsVisible 값을 재정의합니다.
  • 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 - 차트 영역 바깥에 제목을 그립니다.
  • 없음: 제목을 생략합니다.
유형: 문자열
기본값: 'out'
제목 텍스트 스타일

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

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

color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontNamefontSize도 참고하세요.

유형: 객체
기본값: {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인 경우 도움말의 계열 정보 옆에 색상이 있는 정사각형을 표시합니다.

유형: 부울
기본값: false
tooltip.textStyle

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

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

color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontNamefontSize도 참고하세요.

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

도움말을 표시하는 사용자 상호작용:

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

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

추세선은 시리즈별로 지정되므로 대부분의 경우 옵션은 다음과 같습니다.

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

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

유형: 문자열
기본값: 기본 계열 색상
추세선.n.학위

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

유형: 숫자
기본값: 3
추세선.n.labelInLegend

설정되면 추세선 이 범례에 이 문자열로 표시됩니다.

유형: 문자열
기본값: null
추세선.n.lineWidth

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

유형: 숫자
기본값: 2
추세선.n.opacity

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

유형: 숫자
기본값: 1.0
추세선.n.pointSize

차트에 추세선을 스탬프로 찍으면 추세선을 구성할 수 있습니다. 드물게 이 옵션을 사용하여 점의 크기를 맞춤설정할 수 있습니다. 일반적으로 추세선의 lineWidth 옵션을 사용하는 것이 좋습니다. 그러나 전역 pointSize 옵션을 사용하고 추세선에 다른 포인트 크기를 원하는 경우 이 옵션이 필요합니다.

유형: 숫자
기본값: 1
추세선.n.pointsVisible

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

유형: 부울
기본값: true
추세선.n.showR2

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

유형: 부울
기본값: false
추세선.n.type

추세선'linear'(기본값), 'exponential' 또는 'polynomial'인지 여부

유형: 문자열
기본값: 선형
추세선.visibleInLegend

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

유형: 부울
기본값: false
v축

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

{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'}: 천 단위 구분자가 있는 숫자(예: 800만 회)
  • {format: 'scientific'}: 과학적 표기법의 숫자 (예: 8e6)
  • {format: 'currency'}: 현지 통화(예: $8,000,000.00)
  • {format: 'percent'}: 숫자를 백분율로 표시합니다 (예: 800,000,000%
  • {format: 'short'}: 축약된 숫자 (예: 8M)
  • {format: 'long'}: 숫자를 전체 단어 (예: 800만)

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

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

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

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

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

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

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

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

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

차트로 계산한 그리드와 함께 사용하는 경우 날짜/날짜/날짜/시간 데이터 유형의 다양한 측면에서 기본 형식을 재정의합니다. 연도, 월, 일, 시간, 분, 초, 밀리초의 형식을 지정할 수 있습니다.

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

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

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

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

차트에서 생성된 smallGridlines와 함께 사용할 경우 날짜/날짜/시간/날짜 데이터 유형의 다양한 측면에 대한 기본 형식을 재정의합니다. 연도, 월, 일, 시간, 분, 초, 밀리초의 형식을 지정할 수 있습니다.

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

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에 가까운 값은 선형 배율로 표시됩니다.
유형: 문자열
기본값: null
vAxis.textPosition 클래스의 생성자

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

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

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

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

color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontNamefontSize도 참고하세요.

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

자동으로 생성된 Y축 틱을 지정된 배열로 대체합니다. 배열의 각 요소는 유효한 시간 표시 값 (예: 숫자, 날짜, 날짜/시간 또는 시간) 또는 객체여야 합니다. 객체인 경우 틱 값의 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] }
유형: 요소 배열
기본값: 자동
vAxis.title

세로 축의 제목을 지정하는 vAxis 속성

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

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

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

color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontNamefontSize도 참고하세요.

유형: 객체
기본값: {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는 숫자의 경우 가장 가까운 주요 격자선으로, 날짜 및 시간의 경우 가장 가까운 격자선으로 확장됩니다.
  • '최대화' - 최댓값과 최소 데이터 값이 차트 영역의 상단과 하단을 가리키도록 세로 값을 조정합니다. 이렇게 하면 vaxis.viewWindow.minvaxis.viewWindow.max가 무시됩니다.
  • 'explicit' - 차트 영역의 상단 및 하단 배율 값을 지정하는 지원 중단된 옵션입니다. vaxis.viewWindow.minvaxis.viewWindow.max와 중복되므로 지원 중단되었습니다. 이 값을 벗어난 데이터 값은 잘립니다. 표시할 최댓값과 최솟값을 설명하는 vAxis.viewWindow 객체를 지정해야 합니다.
유형: 문자열
기본값: 'pretty'와 동일하지만 vaxis.viewWindow.minvaxis.viewWindow.max가 사용됩니다.
vAxis.viewWindow

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

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

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

vAxis.viewWindowMode가 'pretty' 또는 'maximized'인 경우 무시됩니다.

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

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

vAxis.viewWindowMode가 'pretty' 또는 'maximized'인 경우 무시됩니다.

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

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

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

방법

메서드
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)입니다. 이 차트에서는 특정 시점에 하나의 항목만 선택할 수 있습니다. 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, 작업의 도움말에 표시되어야 하는 텍스트, action, 사용자가 작업 텍스트를 클릭할 때 실행해야 하는 함수 등 3가지 속성을 지정해야 합니다.

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

반환 유형: none
setSelection()

지정된 차트 항목을 선택합니다. 이전 선택을 취소합니다. 선택 가능한 항목은 포인트와 범례 항목입니다. 점은 데이터 표의 셀에 해당하며, 열에 대한 범례 항목(행 색인은 null)입니다. 이 차트에서는 한 번에 하나의 항목만 선택할 수 있습니다. Extended description

반환 유형: 없음
clearChart()

차트를 삭제하고 할당된 모든 리소스를 해제합니다.

반환 유형: 없음

이벤트

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

이름
animationfinish

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

속성: 없음
click

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

속성: targetID
error

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

속성: ID, 메시지
legendpagination

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

속성: currentPageIndex, totalPages
onmouseover

사용자가 시각적 개체 위로 마우스를 가져가면 시작됩니다. 해당하는 데이터 테이블 요소의 행 및 열 색인을 전달합니다.

속성: 행, 열
onmouseout

사용자가 시각적 항목에서 마우스를 치우면 실행됩니다. 해당하는 데이터 테이블 요소의 행 및 열 색인을 전달합니다.

속성: 행, 열
ready

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

속성: 없음
select

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

속성: 없음

데이터 정책

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