管理人ブログ
無料ブログ「rentafree.net」の管理人ブログ

円グラフ

ブログの公式JavaScriptで機能が利用できます。（テンプレート変数&$HEAD;で利用できる）

<canvas>の描画ですので、
IE 9.0以降
Firefox 2.0以降
で表示されます。

スクリプトは、
ページ上に、data-canvas属性の設定された<canvas>要素があり、
対応したデータ用のclass属性を持つ要素が存在する場合にロードされます。

通常はブログ編集ページではスクリプトは実行できませんので、
投稿せずにテストする際は、別ページで、
http://js.rentafree.net/blog.js
をロードしてください。


↓サンプルコード↓
<div style="position:relative;height:300px">
<canvas data-canvas="graph-2012020801" width="300" height="300">
&lt;canvas&gt;対応ブラウザで閲覧してください。
</canvas>
<div style="position:absolute;top:30px;left:350px">
<div class="graph-2012020801" data-type="graph-circle" data-value="37.45,blue" style="color:blue">Internet Explorer (37.45%)</div>
<div class="graph-2012020801" data-value="28.4,green" style="color:green">Google Chrome (28.40%)</div>
<div class="graph-2012020801" data-value="24.78,orange" style="color:orange">Firefox (24.78%)</div>
<div class="graph-2012020801" data-value="6.62,purple" style="color:purple">Safari (6.62%)</div>
<div class="graph-2012020801" data-value="1.95,red" style="color:red">Opera (1.95%)</div>
<div class="graph-2012020801" data-value="0.8,black">その他 (0.80%)</div>
</div>
</div>
↑サンプルコード↑
↓サンプル表示↓
<canvas>対応ブラウザで閲覧してください。
Internet Explorer (37.45%)
Google Chrome (28.40%)
Firefox (24.78%)
Safari (6.62%)
Opera (1.95%)
その他 (0.80%)
↑サンプル表示↑

<canvas data-canvas="graph-2012020801" width="300" height="300"></canvas>
<canvas>に設定するdata-canvas属性は、
描画する<canvas>とデータを関連付けるIDです。
同一ページに複数の描画領域が表示された際に重複すると別の<canvas>に描画されてしまうので、
永久に重複しないように日付を入れることをおすすめします。
2012年2月8日の1番目のグラフなので、"graph-2012020801"としました。
<canvas>内に文字列を入れた場合、非対応ブラウザで表示されます。

<div class="graph-2012020801" data-type="graph-circle" data-value="37.45,blue" style="color:blue">Internet Explorer (37.45%)</div>
<div class="graph-2012020801" data-value="28.4,green" style="color:green">Google Chrome (28.40%)</div>
<div class="graph-2012020801" data-value="24.78,orange" style="color:orange">Firefox (24.78%)</div>
<div class="graph-2012020801" data-value="6.62,purple" style="color:purple">Safari (6.62%)</div>
<div class="graph-2012020801" data-value="1.95,red" style="color:red">Opera (1.95%)</div>
<div class="graph-2012020801" data-value="0.8,black">その他 (0.80%)</div>
<canvas>のdata-canvas属性と同一のclass属性を持つ要素が全てグラフのデータとなります。

一番目の要素にだけ、
data-type="graph-circle"
を設定します。
対象<canvas>に入力する円グラフのデータとなります。

data-value属性には、
data-value="数値,色"
を設定します。
全てのデータの合計値が360度となります。