A4 WORKS Official BLOG

A4 WORKS オフィシャルブログ

jqPlot+Jqueryでグラフを描画してみる

   

コンテンツとしてグラフを表示する要件があったので、いくつか調査し一番良さそうだったのがjqplot。
Jquery(JavaScript)ベースなので、スマホへの対応も意識せずにできます。

jqPlot: http://www.jqplot.com/

jqPlot_sample

こんな感じのグラフがかなり簡単に実装できます。

使い方

ダウンロードページから最新版一式をダウンロードします。

折れ線グラフを作成するには展開したフォルダの中の以下の3つのファイルをピックアップします。

jquery.jqplot.min.css
jquery.jqplot.min.js
/plugins
┗jqplot.categoryAxisRenderer.min.js

 簡単なサンプル

こんな感じのソースでグラフが簡単に描画されます!

オプションも豊富で線の色や太さはもちろん、かなり細部まで指定ができます。
棒グラフ、円グラフ、ブロックチャート、ドーナツグラフなど様々なグラフが簡易な実装で描けます。当然ながら、dataを外部APIから取得し動的に表示するのも簡単です。

ほかのグラフについては、別の機会に紹介できればと。

 - jquery , ,

STINGERレクタングル大

STINGERレクタングル大

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事

jquery_icon
JavaScriptによるページ内の移動とその後の処理を同期させる

Javascriptでスクロール位置を画面最上部にする場合はwindow.scr …

jquery_icon
jqueryでフォームデータを扱う簡単なサンプルコード

jqueryでフォームデータを扱う時の簡単なサンプルです。 テキストボックスの値 …

jquery_icon
JavaScript(jquery)で画像など全部の読み込みが完了した時に処理を行う

jqueryで …

jQuery_UI_icon
jQuery UIのスライダーのデザインを調整する

スライダーを<input type=”range” …

jquery_icon
アクティブ領域のゲージの背景色に色がつくスライダー その2

先日のエントリでjQuery UIを使って”アクティブ領域の背景色に …

jpPlot_icon
jqPlot+Jqueryでグラフを描画してみる その2

前回のエントリjqPlot+Jqueryでグラフを描画してみるの続きです。 今回 …