管理人ブログ

折れ線グラフ

ブログの公式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">
<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-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> </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> </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>

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

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

↑サンプル表示↑

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

<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分割のグラフになります。

棒グラフ

普通国債残高推移
<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"

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

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

円グラフ

<div style="position:relative;height:300px">
<canvas data-canvas="graph-2012020801" width="300" height="300">
<canvas>対応ブラウザで閲覧してください。
</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>

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

Internet Explorer (37.45%)

Google Chrome (28.40%)

Firefox (24.78%)

Safari (6.62%)

Opera (1.95%)

その他 (0.80%)

↑サンプル表示↑

<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度となります。

記事のタイトルが入力できない場合があるようです

たぶん、ごく最近のバージョンのFirefoxだけなんですが、
記事のタイトルを入力して送信しても、表示はされているのに入力が有効でない場合があるようです。

タイトルが空の時に、
Linuxのマウス中ボタンによるセレクションのペーストを行った場合に、
表示はされているが、実際には入力されていない場合があるようです。

Windowsにはセレクションのペースト機能はありませんので問題はありません。
持ってないのでわかりませんが、Macにはセレクションのペースト機能ありそうな気がします。
クリップボードのペーストは問題ありません。

キーボードによる入力や、クリップボードのペーストは問題ないようなので、
問題が生じた場合はお手数ですが、別の入力方法でお願いします。

bugzilla.jpには一応報告しておきました。

あと、Firefox全バージョンにスクロールバーのドラッグ不能になるバグがありましたので以前バグ報告してたのですが、
それはサクッとパッチ作ってくれたようなので、
時期に修正されると思います。
（この問題は、発生する状況にはまずならない。）

ブログにグラフ描画機能つけようかと思ってる

ブログにグラフ描画機能つけようかと思って開発中。

<ul>とか<table>とかでデータのリスト作って、
<canvas>に描画する感じ。

ラベルとかポップアップとかなしでシンプルに。

<canvas>初めて触ったが、HTML4時代は円描画難しかったが、かなり楽。
棒とか線より円のが簡単な感じ。

今の完成度は、円グラフがほぼ完成で、
棒グラフも簡単なのは表示できたが、
横向きとかマイナスの棒グラフに対応させて、
複数の棒を並べてグループ化するグラフにも・・・

線グラフはまだやってないが、
左右いっぱい表示にするから、
マーカーつけるとはみ出しちゃうが、
<canvas>は画像だから、はみ出すと切れちゃう。
まあ、いいかな思ってるが。

しばらく製作時間取れなくなりそうなんで、遅くなるかも・・・

今気づいたが・・・

公式サイトのPRが、2だと思ってたが、
今気づいたが、3あった。

意味ないかも知れんけど、上がると嬉しいもんだ。

ブログの大手さんだと、
アメブロとSeesaaが7もあった。
4までしか持ってないから、5以上は未知の領域。
FC2で６。
忍者は4しか無いみたいだから、追いつけそうな気もしないではない・・・

でも、Firefox 4.0までしかGoogleツールバー入れられないみたいだから、
PR見なくなりそう。

「領域外画像を読み込まない」をチェックして投稿した際に自動高さ設定をするようにしました

ブログの記事編集ページから、
「領域外画像を読み込まない」をチェックして投稿した際に、
style.heightが設定されていない場合でheight属性かclientHeightが取得できる場合、
投稿時に自動的にstyle.heightを設定するようにしました。

height属性を優先して、値がなければclientHeightになります。
px値です。

ブログエディターのセキュリティを強化しました

ブログエディターは、
www.rentafree.net
ドメインでHTMLコードをプレビュー出来るわけで、
自己責任な気もするが、
エディタ上でスクリプトを起動出来ちゃうと、
自分自身のブラウザに裏で www.rentafree.netドメインにフルアクセスさせることが出来ちゃうので、

問題は、
1. ソースモードでウイルスみたいのを自分で挿入
2. プレビューモードに移行
ってした後に、入れたコードを実行するのがよろしくないわけで、

今までは個別にaddEventListenerを大量挿入して、親要素がキャプチャフェイズでイベントを奪って、
設定した分は子要素のイベントを全て無効化していましたが、
事前登録で全てのイベントを無効化するのは無理がある感じだったんで、
事前登録せずに、
ソースモード→プレビュー
移行時にコードを調べて、
onXXXX
的な奴があれば全部addEventListenerして無効化するようにしました。

まだスクリプト起動方法あるような気はするが、
ここらで限界かと・・・
まあ、スクリプト挿入できてプレビュー出来る系のブログじゃ、考慮してる分うちが一番セキュアだとは思う。

あと、今回の修正はaddEventListenerに対応してないんでIE8以下には意味がありませんが、
IE9も含めて全てのIEに、
<script defer>要素が挿入時に即実行できるってセキュリティーホールがありますんで、
IEだとイベント駆動以前に、
ソースモードでウイルス挿入して、
ソース→プレビュー
したらその瞬間にアウトです。

まあ、どっかで拾った怪しいHTMLコードとかは、挿入しない方がいいです。

画像の遅延ロード機能付けました

ブログの公式JavaScript（テンプレート変数&$HEAD;で利用できる）に、
画像の遅延ロード機能付けました。
Lazy Loadみたいな奴です。

詳細は、こちらを確認してください。

画像ポップアップ機能も作ろうか検討中です。

ブログの公式JavaScriptを修正しました

ブログの公式JavaScript（テンプレート変数&$HEAD;で使える機能）ですが、
コメントフォーム関連の機能を修正しました。

今までは
<form><input>にid属性をつける必要がありましたが、

onsubmit時にthisを送信することにより、
<form>のid属性が不要に。
（スパム防止機能）

<input>のクッキー関連機能は、
id属性ではなくclass属性を見るようにしたため、
一つのページに複数のフォームを設置できるようになった。

となります。

互換性のため、
今までどおりid属性でもクッキー関連機能は利用できます。

公式テンプレートについては新仕様に変更しました。

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