FC2ブログ
 

LotusNotesな日々IBM社のLotusNotesに関係する何かを日々語ってるようなきがしないでもないブログです。 

このページの記事目次 ( ← 2013年06月 → )

【HTML+JavaScript】HTML5でグラフを描こう

   ↑  2013/06/08 (土)  カテゴリー: JavaScript/CSS
HTML5のcanvasという要素をつかいます。

↓解説サイト
Canvas(hTML5.jp)
http://www.html5.jp/canvas/index.html

canvas でグラフをつくるには、以下の手順になります。

1)まず、canvas要素をつくります。

<canvas id="a1" width="640" hight="480">
このコンテンツはお使いのブラウザでは表示できません
</canvas>

範囲(描画領域)= 幅(width属性)と高さ(height属性)を指定します。
非対応ブラウザ対応としてタグの中にメッセージを記載しておいてください。

2)つぎに、JavaScriptで要素に命令を与えます。
function drow(){
//要素を取得します
var canvas = document.getElementById('a1');
if( ! canvas || ! canvas.getContent) { return false };
var ctx = canvas.getConrext('2d');
//ctxに対して命令を指定します
 ・
 ・
 ・
}


idを使用して要素を取得します。
getConrectは'2d'以外指定できません。

基礎は以上、
実際はcanvasの要素(エレメント)生成からライブラリを使ったほうが楽で早いです^^;

今回はFlotr2の紹介。

↓本家
Flotr2
http://www.humblesoftware.com/flotr2

↓説明サイト
HTML5のcanvas機能で綺麗なグラフが作れる!「Flotr2」を試してみた(LIG)
http://liginc.co.jp/designer/archives/6023

↓developerWorks(アドレスが長いのでそのままリンク)
XPagesでFlotr2を使ってグラフを書く(前編)
XPagesでFlotr2を使ってグラフを書く(後編)

同じようなJavaScriptライブラリであるdojoを使用した方法は
次回以降で少し解説してみます。
スポンサーサイト



(記事編集) http://mesosune.blog123.fc2.com/blog-entry-394.html

2013/06/08 | Comment (0) | Trackback (0) | HOME | ↑ ページ先頭へ |