管理人ブログ
無料ブログ「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-2012020806" width="300" height="300" style="border:1px solid">
&lt;canvas&gt;対応ブラウザで閲覧してください。
</canvas>
<div style="position:absolute;top:30px;left:350px">
<table border>
<tr><th>&nbsp;</th><th>A</th><th>B</th><th>C</th></tr>
<tr><th>1</th>
    <td class="graph-2012020806" data-id="0" data-type="graph-line" data-right="1" data-color="black" data-max="50" data-min="0" data-marker="3" data-value="30">30</td>
    <td class="graph-2012020806" data-id="1" data-type="graph-line" data-color="red" data-max="50" data-min="0" data-marker="3" data-value="25">25</td>
    <td>&nbsp;</td>
</tr>
<tr><th>2</th>
    <td class="graph-2012020806" data-id="0" data-value="25">25</td>
    <td class="graph-2012020806" data-id="1"  data-value="30">30</td>
    <td class="graph-2012020806" data-id="2" data-type="graph-line" data-left="1" data-color="blue" data-max="50" data-min="0" data-marker="3" data-value="5">5</td>
</tr>
<tr><th>3</th>
    <td class="graph-2012020806" data-id="0" data-value="20">20</td>
    <td class="graph-2012020806" data-id="1"  data-value="35">35</td>
    <td class="graph-2012020806" data-id="2" data-value="10">10</td>
</tr>
<tr><th>4</th>
    <td>&nbsp;</td>
    <td class="graph-2012020806" data-id="1"  data-value="25">25</td>
    <td class="graph-2012020806" data-id="2" data-value="15">15</td>
</tr>
</table>
</div>
</div>
↑サンプルコード↑
↓サンプル表示↓
<canvas>対応ブラウザで閲覧してください。
 ABC
1 30 25  
2 25 30 5
3 20 35 10
4   25 15
↑サンプル表示↑

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

<table border>
<tr><th>&nbsp;</th><th>A</th><th>B</th><th>C</th></tr>
<tr><th>1</th>
    <td class="graph-2012020806" data-id="0" data-type="graph-line" data-right="1" data-color="black" data-max="50" data-min="0" data-marker="3" data-value="30">30</td>
    <td class="graph-2012020806" data-id="1" data-type="graph-line" data-color="red" data-max="50" data-min="0" data-marker="3" data-value="25">25</td>
    <td>&nbsp;</td>
</tr>
<tr><th>2</th>
    <td class="graph-2012020806" data-id="0" data-value="25">25</td>
    <td class="graph-2012020806" data-id="1"  data-value="30">30</td>
    <td class="graph-2012020806" data-id="2" data-type="graph-line" data-left="1" data-color="blue" data-max="50" data-min="0" data-marker="3" data-value="5">5</td>
</tr>
<tr><th>3</th>
    <td class="graph-2012020806" data-id="0" data-value="20">20</td>
    <td class="graph-2012020806" data-id="1"  data-value="35">35</td>
    <td class="graph-2012020806" data-id="2" data-value="10">10</td>
</tr>
<tr><th>4</th>
    <td>&nbsp;</td>
    <td class="graph-2012020806" data-id="1"  data-value="25">25</td>
    <td class="graph-2012020806" data-id="2" data-value="15">15</td>
</tr>
</table>
<canvas>のdata-canvas属性と同一のclass属性を持つ要素が全てグラフのデータとなります。

折れ線グラフは通常複数の線を表示しますが、
data-id="0"
data-id="1"
data-id="2"
とdata-id属性をわけることにより、別グラフとして扱われます。
0からの連番で設定してください。
別のグラフを同じ<canvas>に表示する感じです。
data-id属性は折れ線グラフ以外にも有効なので、
棒グラフと折れ線グラフを同じ<canvas>に表示することもできます。
重なる場合はdata-idの大きい物で上書きされます。

同一data-idの一番目の要素を、
data-type="graph-line"
と設定すると折れ線グラフになります。

色は同一グラフで同じ色にしますので、同一data-idの一番目の要素に、
data-color="色"
と設定します。
省略した場合は黒です。

data-max="最大値" data-min="最小値"
上下の高さを揃えるために、
data-maxとdata-minを設定します。
折れ線グラフでは、
max<0及びmin>0が許可されます。

data-marker="3"
とすると点の位置に半径3pxの円が表示されます。

data-value="数値"
data-value属性は全ての要素に設定します。

もし、グラフを途中から始めたり途中で切りたい場合は、
同一data-idの最初の要素で、
data-left="数値"
data-right="数値"
を設定します。
数値に指定した分だけ、左又は右の項目が省略されます。
サンプルの場合は、
A-4、C-1が省略されていますが、
もしdata-leftとdata-rightが設定されない場合は4分割ではなく3分割のグラフになります。