구글 그래프

간단한 선도에서 복잡한 분할 트리도, 구글 차트 라이브러리는 사용할 수 있는 다양한 차트 유형을 제공합니다：

  • 스케치 차트(Scatter Chart)
  • 선도(Line Chart)
  • 바/칼럼 차트(Bar / Column Chart)
  • 면적 차트(Area Chart)
  • 파이 차트(Pie Chart)
  • 甜甜圈 차트(Donut Chart)
  • 조직도(Org Chart)
  • 지도/지리 차트(Map / Geo Chart)

구글 차트를 어떻게 사용하나요?

구글 차트를 웹 페이지에서 사용하려면, 다음과 같이 합니다차트 로드기의 링크를 추가합니다：

<script
src="https://www.gstatic.com/charts/loader.js">
</script>

구글 차트는 사용하기 쉽습니다

단지 하나만 추가하면 됩니다 <div> 요소를 통해 차트를 표시할 수 있습니다：

<div id="myChart" style="max-width:700px; height:400px"></div>

div 요소는 유일한 ID를 가져야 합니다

그런 다음 Google Graph API를 로드합니다：

  1. Visualization API와 corechart 패키지를 로드합니다
  2. 콜백 함수를 설정하여 API가 로드되면 호출됩니다
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);

이렇게 하면!

곡선 그래프

원본 코드

function drawChart() {
// 데이터 설정
var data = google.visualization.arrayToDataTable([
  ['가격', '크기'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]
// 옵션 설정
var options = {
  title: '집 가격과 집 면적',
  hAxis: {title: '평방 미터'},
  vAxis: {title: '백만 가격'},
  legend: 'none'
};
// 그래프 그리기
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}

직접 시도해보세요

스프레드 시트 그래프

동일한 데이터를 생성하려면스프레드 시트 그래프을 변경하면 google.visualization 을 변경하면 ScatterChart：

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

직접 시도해보세요

막대 그래프

원본 코드

function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['이탈리아', 55],
  ['프랑스', 49],
  ['스페인', 44],
  ['미국', 24],
  
]
var options = {
  title: '세계 와인 생산'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

직접 시도해보세요

도시락 그래프

막대 그래프를 변환하려면도시락 그래프를 사용하여만:

google.visualization.PieChart

대체:

google.visualization.BarChart

var chart = new google.visualization.PieChart(document.getElementById('myChart'));

직접 시도해보세요

3D 도시락 그래프

3D 형식으로 도시락 그래프를 표시하려면 단순히 is3D: true 옵션에 추가하세요：

var options = {
  title: '세계 와인 생산',
  is3D: true
};

직접 시도해보세요