Google グラフ

シンプルなラインチャートから複雑な階層ツリー図まで、Googleチャートライブラリは随时利用可能な多くのチャートタイプを提供しています：

  • スカッターチャート（Scatter Chart）
  • ラインチャート（Line Chart）
  • バーチャート/コラムチャート（Bar / Column Chart）
  • エリアチャート（Area Chart）
  • パイチャート（Pie Chart）
  • ドーナッツチャート（Donut Chart）
  • 組織図（Org Chart）
  • 地図/地理チャート（Map / Geo Chart）

Googleチャートを使う方法はどうすればいいですか？

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

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

Googleチャートは使いやすいです。

以下の1つを追加してください <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);
}

自分で試してみる

パイグラフ

バargラフを条形図に変換するには、ただパイグラフ、以下を使用して：

google.visualization.PieChart

以下を置き換え：

google.visualization.BarChart

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

自分で試してみる

3D パイグラフ

3D 形式でパイグラフを表示するには、ただ is3D: true オプションに追加：

var options = {
  title: '世界のワイン生産',
  is3D: true
};

自分で試してみる