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

スポンサーサイト

   ↑  --/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

(記事編集) http://mesosune.blog123.fc2.com/?overture" target="_new

--/--/-- | Comment (-) | HOME | ↑ ページ先頭へ |

【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 | ↑ ページ先頭へ |

Comment

コメントを投稿する 記事: 【HTML+JavaScript】HTML5でグラフを描こう

お気軽にコメントをぞうぞ。
非公開 (管理人のみ閲覧可能なコメント) にしたい場合には、ロック にチェックを入れてください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。