コニファ・ロゴ

csstest:Google Chart APIを使って、Pie Chart(円グラフ)を作成

● Google jsapiからAJAX APIをロードしてチャート画像を作成

まずAPIを読み込み、
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
次のように、表示するデータをdata.addRows部分に"[ ]"でくくって並べたScriptを加えるだけで、きれいな円グラフを作ってくれます。ただし、タイトル(Test-pie chartの部分)などに日本語を使うと、うまく動きません。
<script>
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task');
      data.addColumn('number', 'Hours per Day');
      data.addRows([
        ['Sample1',9],['Sample2',4],['Sample3',3],
        ['Sample4',2],['Sample5',2]
      ]);
      var options = {
        width: 450, height: 250,
        title: 'Test-pie chart'
      };
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
</script>

● Google Chart APIへデータを送って、チャート画像を呼び出し

Google Chart APIから画像を取得するため、一瞬間が空きます。
一度画像を取得して、それを使い回すという使い方が適しているかもしれません。なお、パラメータcht=pで平面(次の上側)、cht=p3で立体的(次の下側)になります。
<img src="http://chart.apis.google.com/chart? cht=p&chd=t:9,4,3,2,2&chs=400x150&
    chl=Sample1|Sample2|Sample3|Sample4|Sample5 &chco=3366CC|DC3912|FF9900|109618|990099" 
    alt="Test-pie chart" height=" 150" width="400">
Test-pie chart

 

Test-pie chart

 

※このページは次の日付で、一部リライトしています。
リライト更新日:

 

戻るボタン