表現力の高さに驚き。HTML5/Canvasグラフライブラリ·Flotr2 MOONGIFT
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。 これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラフです。 途中で途切れた曲線のグラフも描けます。 棒グラフです。 マウスオーバーで値を表示できます。 積み上げグラフです。 円グラフです。 レーダーチャート。 範囲グラフ。 ローソクチャートです。 滑らかな曲線のグラフです。 マウスオーバーでグリッドが表示されます。 マウスズームのデモです。 マウスで一部の範囲を指定できます。 折れ線グラフです。 マイナスの値にも対応。 クリックでリアルタイムにグラフを描きます。 画像ダウンロード
humble software development - flotr2
Introduction Flotr2 is a library for drawing HTML5 charts and graphs. It is a branch of flotr which removes the Prototype dependency and includes many improvements. Features: mobile support framework independent extensible plugin framework custom chart types FF, Chrome, IE6+, Android, iOS lines bars candles pies bubbles Usage To use Flotr2, include the flotr2.min.js script in your page and create
HTML5のcanvas機能で綺麗なグラフが作れる！「Flotr2」を試してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
HTML5のcanvas機能を使用してグラフが作成出来るライブラリ、「Flotr2」がとても素敵だったので試してみました。グラフは円グラフ・棒グラフ・折れ線グラフなど様々な形での表現が可能です。 使用方法 使用するときのルールは以下の通りです。 「flotr2.min.js」を読み込む グラフを表示するdivのID名を決めて、ソースを書き換える（デモでは「#graph」） 上記IDにwidth、heightを設定する あとはサンプルのソースの数値や項目名など書き換えればOK。 デモ 表現出来るグラフが紹介しきれないくらいたくさんあるので、汎用性のある折れ線グラフ、レーダーチャート、円グラフを試してみました。 折れ線グラフ デモページはこちら <br /> <!DOCTYPE html><br /> <html lang="ja" dir="ltr"><br /> <head><br />
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
