FC2ブログ

RGraph : HTML5 charts library

2013-11-25 :  PCクリニック
昨日(2013-11-24)の記事:
HTML5:<canvas>要素
で書いたが、
  HTML5 の「canvas」でグラフが描ける。

ですが、
参考とした「<canvas>タグで図形を描く」ページの様な
コーディングでは、些か気が滅入る。

そこで、何とか便利なものは無いのか?・・・

探してみた。「HTML5 canvas graph」で。

取り敢えず、5件ピックアップ。

・・・ Flotr2 を試してみた」(「株式会社LIG」サイト内)
  使用するときのルールは以下の通りです。
  1.「flotr2.min.js」を読み込む
  2.グラフを表示するdivのID名を決めて、ソースを書き換える
  3.上記IDにwidth、heightを設定する
  あとはサンプルのソースの数値や項目名など書き換えればOK。
  ・・・・・
  これ:http://humblesoftware.com/flotr2/

RGraph: HTML5 charts library
  RGraph is a HTML5 canvas and JavaScript based library built for
  web charts and supports over twenty different types of visualisation.
  Using the new <canvas> tag,
  RGraph creates these "HTML5 charts" inside the web browser
  using JavaScript, meaning quicker pages and less web server load.
  This leads to smaller page sizes, lower costs and faster websites.

Chart.js」(「HTML5 Charts for your website.」サイト内)
  Easy, object oriented client side graphs for
  designers and developers

Javascript ライブラリー」(「HTML5.JP」サイト内)
  HTML5.JPオリジナルのJavaScriptライブラリを公開していきます。
  ご自由にライブラリをダウンロードして貴サイトにてご活用ください。
  ・・・・・
  折線グラフ
  JavaScriptから折線グラフをcanvas要素に描画します。
  パラメータを指定することで、項目、色、凡例表示などお好みの
  折線グラフを柔軟に描画できます。

CanvasJS:Beautiful HTML5 & JS Charts
  CanvasJS is an easy to use JavaScript & HTML5 Charting library
  built on Canvas element.
  It runs across devices including iPhone, iPad, Android,
  Windows Phone, Microsoft Surface, Desktops, etc.
  This allows you to create rich dashboards that work on
  all the devices without compromising on maintainability
  or functionality of your web application.
  CanvasJS comes with beautiful themes and is over 10x faster than
  conventional Flash and SVG Charts - resulting in lightweight,
  beautiful and responsive dashboards.

ざっと、以上の5種類。

更に、極めつき(?)
「dotHTML5」の「・・・でグラフを描くJSライブラリ18選
で紹介されている、
HTML5 Canvas Graphing Solutions Every Web Developers Must Know
  1. Visualize
  2. rGraph
  3. iGrapher
  4. Function Plotter
  5. Building HTML5 Canvas Bar Graph
  6. HTML5 Graph Slider
  7. Graph.tk
  8. Ticker Plot
  9. HumbleFinance
  10. Charting HTML5
  11. Graphr
  12. Snazzy Animated Pie Chart with HTML5 and jQuery
  13. AwesomeJS
  14. jsGraph
  15. Facebook Privacy
  16. ASK KEN
  17. CanvasXpress
  18. ZingChart
以上の18件。最初の5件と一部重複するが、
有償/無償、スタンドアロン/Web サイト、等々色々ある。


多少中身を読み比べて、
RGraph: HTML5 charts library
が良さそうな気がした。

ライセンスは?

  RGraph is free for non-commercial use under
  the Creative Commons Attribution NonCommercial 3.0 license,
  meaning you just need to link to the RGraph website
  if you're using it for non-commercial purposes and
  there are commercial licenses available if you're a commercial entity.
つまり、
  You are free:
   to Share - to copy, distribute and transmit the work
   to Remix - to adapt the work
  Under the following conditions:
   Attribution - ・・・
   Noncommercial - ・・・
  With the understanding that:
   ・・・・・
  ・・・・・

まあ、個人使用は無料と云うことで、・・・

早速、ダウンロードのページから、
「the RGraph stable version」即ち、
「RGraph2_2013-10-01-stable.zip」(593KB)
をダウンロードさせて頂き、

テスト用のディレクトリに展開した。

メインの「libraries」ディレクトリ初め6つのディレクトリと、
「default.html」、「license.txt」の2つのファイル
があった。

「default.html」を開いて見ると、

  Demos of charts (local)
  Demos of some of the various charts and features provided by RGraph
  ・・・リンク・・・

  Demos of charts (online)
  The same demos as above are also available on rgraph.net.
  Due to browser security the AJAX demos will not work locally
  so you can see these if you go online.
  ・・・リンク・・・

  Other pages on rgraph.net

  Home page
  The RGraph homepage on www.rgraph.net

  Examples
  Examples of the types of charts that are supported by RGraph.

  Documentation
  Documentation for RGraph

  HOWTO guides
  Guides for doing specififc tasks with RGraph.

  Basic examples
  Basic guides with straight-forward source code that
  can help you when trying to get RGraph setup.

とある。

それで、
  Basic examples
から、
  A basic Line chart example
を見ながら、暫く学習?


気に入った点では、
素直に折れ線を描画するのは勿論のこと、
spline曲線での描画も出来る!!!

その他、
手軽に、見栄えのする、色んなグラフを描画出来る。


だが、しかし、・・・

グラフ作成用データ点の指定が、・・・

1次元配列?・・・
つまり、X座標値は一定間隔で、Y座標値のみの指定???


これだと、欲しいものでは無いのだが???


もう少し、弄ってみよう。


お粗末でした。


見ていただいた序でとは厚かましい限りですが、
お帰りに投票して頂けるとなお嬉しいです。 ⇒ blogram投票ボタン


131122
関連記事
スポンサーサイト



コメントの投稿

管理者にだけ表示を許可する

人気blog Ranking



最新記事
カレンダー
07 | 2021/08 | 09
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 30 31 - - - -
月別アーカイブ
カテゴリ
最新コメント
検索フォーム
リンク
プロフィール

<紙>

Author:<紙>
ようこそ。
「パソコンヲタクの雑記帳」
もろもろなことを綴っています。
パソコン ヲタクってねくら?
画像は kami でなく kani です。

FC2 / i2i / Google




Google Analytics
ブックマーク