Google Chartで面グラフ（Area Chart）の作成方法

Google Chartを利用するとArea Chart（面グラフ）を簡単に作成することができます。

Google ChartのArea Chartのコードひな形
Area Cahrtの作成方法

Google ChartのArea Chartのコードひな形

単純なグラフを表示するだけなら下のコードにある変数chartDataにArea Chart用のデータを設定するだけでグラフを表示するコードは完成します。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script>
google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var chartData = [...] //配列データ設定
  data = google.visualization.arrayToDataTable(chartData);
  chart = new google.visualization.AreaChart(document.getElementById('chartPNG'));
  chart.draw(data);
}
</script>

実際にグラフを表示するには、bodyタグで<div id=”chartPNG”></div>を記述します。

Area Cahrtの作成方法

グラフ用に必要なデータを用意して設定するだけでグラフを表示できます。 Area Chart：データフォーマットオブションを追加することもできます（オプション） Area Chartの例

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script>
google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var chartData = [
    ["数学","1組","2組"],
    ["1学期",60,80],
    ["2学期",70,78],
    ["3学期",75,76]
  ];
  /*
  options = {
    width:600, //横幅
    height: 300 //高さ
  }
  */
  data = google.visualization.arrayToDataTable(chartData);
  chart = new google.visualization.AreaChart(document.getElementById('chartPNG'));
  chart.draw(data);
  // オプション設定する場合、変数optionsに値を設定し下のコードを使用
  //chart.draw(data,options); 
}
</script>