● 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">