Google chart tools で円グラフ作成
つづきましてはグラフAPIの紹介です。
Google chart tools で円グラフ作成
Google が提供しているAPI「Google chart tools」では色々なグラフが描けるのですが、今回は円グラフに挑戦してみます。
動作検証を行ったのは次のバージョンです。
Google Chrome 43.0.2357.130 m
実行結果
ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1.0', {'packages':['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Shop'); data.addColumn('number', 'Sales'); data.addRows([ ['ピ○ーラ', 432], ['ピ○ハット', 256], ['ドミノピ○', 218], ]); var options = { 'title': '宅配ピザ売上シェア', 'width': 400, 'height': 300, is3D: true }; var chart = new google.visualization.PieChart(document.getElementById('chartarea')); chart.draw(data, options); } </script> </head> <body> <div id="chartarea"></div> </body> |
解説
ポントは次の３点です。
１．data.addColumnで項目定義
２．data.addRowsでデータ設定
３．optionsでオプション指定（任意）
たったこれだけです。
動的サイトであってもこのポイント部分が規則的に纏まっているので操作が容易ですね。
参考情報
https://developers.google.com/chart/
無意味なコメント
データは「マツコの知らないデリバリーピザの世界」を観てしまったので御三家を調べたものです。
それにしても昔と違い今ではAPIが充実しているのでWebシステムでもグラフを作るのが苦にならないですね。