Google グラフ

単純な折れ線グラフから複雑な階層ツリー図まで、Google Chartライブラリは随时利用できる多くのグラフタイプを提供しています：

  • 散布図（Scatter Chart）
  • 折れ線グラフ（Line Chart）
  • 棒グラフ/柱状グラフ（Bar / Column Chart）
  • 面積グラフ（Area Chart）
  • 円グラフ（Pie Chart）
  • ドーナッチャート（Donut Chart）
  • 組織図（Org Chart）
  • 地図/地理チャート（Map / Geo Chart）

Google Chartの使い方

Google Chartを使用するには、あなたのウェブページでグラフローダーのリンクを追加します：

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

Google Chartは使いやすいです。

必要なのは一つだけ <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
};

自分で試してみる