棒グラフ

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

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

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

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

↓サンプル１コード↓

普通国債残高推移
<div style="border:1px solid;position:relative;height:350px">
<canvas data-canvas="graph-2012020802" width="300" height="300" style="position:absolute;top:20px;left:60px;border:1px solid">
<canvas>対応ブラウザで閲覧してください。
</canvas>
<div style="position:absolute;top:0px;left:0px;width:60px;font-size:15px">
<div style="position:absolute;top:15px;right:3px">[兆円]</div>
<div style="position:absolute;top:55px;right:3px">600</div>
<div style="position:absolute;top:98px;right:3px">500</div>
<div style="position:absolute;top:141px;right:3px">400</div>
</div>
<div style="position:absolute;top:323px;left:60px;font-size:15px;text-align:center">
<div style="position:absolute;left:0px;width:43px">2005</div>
<div style="position:absolute;left:43px;width:43px">2006</div>
<div style="position:absolute;left:86px;width:43px">2007</div>
<div style="position:absolute;left:129px;width:43px">2008</div>
<div style="position:absolute;left:171px;width:43px">2009</div>
<div style="position:absolute;left:214px;width:43px">2010</div>
<div style="position:absolute;left:257px;width:43px">2011</div>
</div>
<div style="position:absolute;top:50px;left:410px">
<table border>
<tr><th class="graph-2012020802" data-type="graph-bar" data-max="700" data-value="499,black">2005年</th><td>499兆円</td></tr>
<tr><th class="graph-2012020802" data-value="527,black">2006年</th><td>527兆円</td></tr>
<tr><th class="graph-2012020802" data-value="532,black">2007年</th><td>532兆円</td></tr>
<tr><th class="graph-2012020802" data-value="546,black">2008年</th><td>546兆円</td></tr>
<tr><th class="graph-2012020802" data-value="594,black">2009年</th><td>594兆円</td></tr>
<tr><th class="graph-2012020802" data-value="642,black">2010年</th><td>642兆円</td></tr>
<tr><th class="graph-2012020802" data-value="668,black">2011年</th><td>668兆円</td></tr>
</table>
</div>
</div>

↑サンプル１コード↑
↓サンプル１表示↓

普通国債残高推移

[兆円]

600

500

400

2005

2006

2007

2008

2009

2010

2011

2005年	499兆円
2006年	527兆円
2007年	532兆円
2008年	546兆円
2009年	594兆円
2010年	642兆円
2011年	668兆円

↑サンプル１表示↑

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

<canvas>のdata-canvas属性と同一のclass属性を持つ要素が全てグラフのデータとなります。

一番目の要素にだけ、

data-type="graph-bar"

を設定します。
対象<canvas>に入力する棒グラフのデータとなります。

data-max="700"

は、データの最大値（上端）の値を設定します。
この属性は必須ではなく、
今回のデータで省略した場合は668が上端となります。
同じように、
data-minで最低値（下端）を設定できます。
data-max<0又はdata-min>0の場合は0となります。
これらの設定も一番目の要素のみ有効です。

data-value属性には、

data-value="数値,色"

を設定します。

今回は左と下にラベルを付けていますが、
ラベル表示機能はありませんので、
上位要素を、position:relative;にして、
座標を計算して、position:absolute;で文字を表示しています。
今回は、上端が700下端が0なので、上下700分割。
左右は7項目なので7分割です。

棒の左右に余白ができますが、
余白の幅は、一番目の要素に、
data-margin属性を設定することで余白の幅を変更できます。
初期値は"0.1"で、
左右に1割余白を入れます。

↓サンプル２コード↓

<div style="position:relative;height:300px">
<canvas data-canvas="graph-2012020803" width="300" height="300" style="border:1px solid">
<canvas>対応ブラウザで閲覧してください。
</canvas>
<div style="position:absolute;top:30px;left:350px">
<table border>
<tr><th> </th><th>A</th><th>B</th><th>C</th></tr>
<tr><th>1</th>
    <td class="graph-2012020803" data-type="graph-bar" data-value="30,black,0.0">30</td>
    <td class="graph-2012020803" data-value="25,red,0.1">25</td>
    <td class="graph-2012020803" data-value="35,blue,0.2">35</td>
</tr>
<tr><th>2</th>
    <td class="graph-2012020803" data-value="25,black,1.0">25</td>
    <td class="graph-2012020803" data-value="30,red,1.1">30</td>
    <td class="graph-2012020803" data-value="30,blue,1.2">30</td>
</tr>
<tr><th>3</th>
    <td class="graph-2012020803" data-value="20,black,2.0">20</td>
    <td class="graph-2012020803" data-value="35,red,2.1">35</td>
    <td class="graph-2012020803" data-value="15,blue,2.2">15</td>
</tr>
<tr><th>4</th>
    <td class="graph-2012020803" data-value="25,black,3.0">25</td>
    <td class="graph-2012020803" data-value="40,red,3.1">40</td>
    <td class="graph-2012020803" data-value="5,blue,3.2">5</td>
</tr>
</table>
</div>
</div>

↑サンプル２コード↑
↓サンプル２表示↓

	A	B	C
1	30	25	35
2	25	30	30
3	20	35	15
4	25	40	5

↑サンプル２表示↑

３本の棒をまとめて４列表示するグラフです。
この場合は、

data-value="数値,色,位置"

と、
data-value属性の3番目のパラメータで棒の表示位置を指定します。
この値は省略した場合は0からの正数連番となります。
正数部分が大きい分割の左からの位置で、一番左が0です。
少数部分は、小さい分割の左からの位置で一番左が0です。

↓サンプル３コード↓

<div style="position:relative;height:300px">
<canvas data-canvas="graph-2012020804" width="300" height="300" style="border:1px solid">
<canvas>対応ブラウザで閲覧してください。
</canvas>
<div style="position:absolute;top:30px;left:350px">
<table border>
<tr><th> </th><th>A</th><th>B</th><th>C</th></tr>
<tr><th>1</th>
    <td class="graph-2012020804" data-type="graph-bar" data-direction="1" data-value="30,black,0.0">30</td>
    <td class="graph-2012020804" data-value="25,red,0.1">25</td>
    <td class="graph-2012020804" data-value="35,blue,0.2">35</td>
</tr>
<tr><th>2</th>
    <td class="graph-2012020804" data-value="25,black,1.0">25</td>
    <td class="graph-2012020804" data-value="30,red,1.1">30</td>
    <td class="graph-2012020804" data-value="30,blue,1.2">30</td>
</tr>
<tr><th>3</th>
    <td class="graph-2012020804" data-value="20,black,2.0">20</td>
    <td class="graph-2012020804" data-value="35,red,2.1">35</td>
    <td class="graph-2012020804" data-value="15,blue,2.2">15</td>
</tr>
<tr><th>4</th>
    <td class="graph-2012020804" data-value="25,black,3.0">25</td>
    <td class="graph-2012020804" data-value="40,red,3.1">40</td>
    <td class="graph-2012020804" data-value="5,blue,3.2">5</td>
</tr>
</table>
</div>
</div>

↑サンプル３コード↑
↓サンプル３表示↓

	A	B	C
1	30	25	35
2	25	30	30
3	20	35	15
4	25	40	5

↑サンプル３表示↑

サンプル２を横向きにしたグラフです。
サンプル２の一番目のデータに、

data-direction="1"

と設定しました。

別領域への描画なので、
data-canvas属性とclass属性は変更しています。

↓サンプル４コード↓

<div style="position:relative;height:300px">
<canvas data-canvas="graph-2012020805" width="300" height="300" style="border:1px solid">
<canvas>対応ブラウザで閲覧してください。
</canvas>
<div style="position:absolute;top:30px;left:350px">
<table border>
<tr><th> </th><th>A</th><th>B</th></tr>
<tr><th>1</th>
    <td class="graph-2012020805" data-type="graph-bar" data-max="50" data-min="-50" data-direction="1" data-value="30,black,0.0">30</td>
    <td class="graph-2012020805" data-value="-25,red,0.0">-25</td>
</tr>
<tr><th>2</th>
    <td class="graph-2012020805" data-value="25,black,1.0">25</td>
    <td class="graph-2012020805" data-value="-30,red,1.0">-30</td>
</tr>
<tr><th>3</th>
    <td class="graph-2012020805" data-value="20,black,2.0">20</td>
    <td class="graph-2012020805" data-value="-35,red,2.0">-35</td>
</tr>
<tr><th>4</th>
    <td class="graph-2012020805" data-value="25,black,3.0">25</td>
    <td class="graph-2012020805" data-value="-40,red,3.0">-40</td>
</tr>
</table>
</div>
</div>

↑サンプル４コード↑
↓サンプル４表示↓

	A	B
1	30	-25
2	25	-30
3	20	-35
4	25	-40

↑サンプル４表示↑

data-min<0かつ、data-max>0の場合は0の位置に線が出ます。
今回は、

data-max="50" data-min="-50"

としています。
縦表示でも同様です。

また、棒の表示位置を指定して、同じ列に左右に表示しています。

Sun	Mon	Tue	Wed	Thu	Fri	Sat
			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	29	30