구글 그래프

간단한 라인 차트에서 복잡한 계층형 트리 그래프까지, Google 차트 라이브러리는 언제든지 사용할 수 있는 다양한 차트 유형을 제공합니다:

  • 스캐터 차트
  • 라인 차트
  • 바 그래프/칼럼 그래프(바 / 컬럼 차트)
  • 면적 차트
  • 파이 차트
  • 도넛 차트
  • 조직도(오ργ 차트)
  • 지도/지리도(맵 / 지오 차트)

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

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

<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],
  ['아르헨티나', 15]
]);
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
};

직접 시도해 보세요