「HeartRails Graph」で円グラフ
「HeartRails Graph」を利用して、最近はやりの「べつやくメソッド」的グラフを作成します。
といっても、URLパラメータを作成して 画像のソースに設定するだけ。
サンプル:
<img id="graph" src="#"/> <script> /** * グラフを表示する。 * @param {String} elementId 挿入先img要素のID * @param {Array} data グラフのデータ */ function showGraph ( elementId, data ) { var query = ""; for ( var i = 0; i < 10 && i < data.length; i++ ) { query += "text" + i + "=" + encodeURI( data[i].name + " (<pp>) " ) + "&"; query += "value" + i + "=" + encodeURI( data[i].value ) + "&"; } var img = document.getElementById( elementId ); img.src = "http://graph.heartrails.com/api/?" + query; } // データ var data = [ { name:"mii", value:20 }, { name:"tora", value:10 }, { name:"kuro", value:5 }, { name:"shiro", value:1 } ]; // グラフ表示 showGraph ( "graph", data ); </script>
出力イメージ:
クリックで表示
シンプルで使いやすいのに、いろいろできます。すごい!