Facebook Twitter Google Maps RSS
Home 未分類 【第3回】おしゃれなグラフを手軽に作成! -jqPlot-
formats

【第3回】おしゃれなグラフを手軽に作成! -jqPlot-

Published on 2015年10月6日, by in 未分類.


こんにちは!

陽気なシステム屋のりょーたです!

今月で3回目です!
今回はビジュアル面も素晴らしいグラフを作成するライブラリ、
jqPlotをご紹介します。
 

jqPlotの読み込み

まず、導入方法ですが特に変わったことはなく、ダウンロードしたファイルを配置しHTMLでインポートします。
因みにjQueryがないと動作しないので事前に入れておいてください。
 
Link:jqPlotはこちらのDownloadから
 
いつも通りではありますが、これで準備完了です!!
さて、続いて基本的な使い方を説明しようかと思いましたが、
公式ドキュメントに詳しく書かれているので、今回は実際の使用で躓いた部分について話そうかと思います。
 
Link:公式ドキュメント
 

応用編!!

さて、今回私が実装したかった機能として、
『〇〇以上は*色にしたい。xx以下は~~』
などといった値によって背景を色分けするといったものでした。

よく目にするので、そういったオプションも用意されているだろうと高をくくっていましたが、
探しても探してもなかなか見つからない…。
公式ドキュメントはもちろんのこと、似たような機能を実装された例も探してみましたがありませんでした…。
少し諦めかけながら、あまり期待せず使えそうなメソッドがあるかソースコードを覗いていたら、なんとか見つけました!!!!!

その名もrectangleです!
使用方法は、グラフの初期設定時にオプションとして、
 

$(document).ready(function(){
  var plot1 = $.jqplot ('chart1', [[30,-10,90,20,50,130,80,120,50]], {
      canvasOverlay: {
        show: true,
        objects: [
          { rectangle: { ymax: 0, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                    color: "rgba(0, 0, 200, 0.3)", showTooltip: true, tooltipFormatString: "Too Cold" } },
          { rectangle: { ymin: 100, xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                    color: "rgba(200, 0, 0, 0.3)", showTooltip: true, tooltipFormatString: "Too Warm" } }
        ]
      } 
  });
});

 
のようにrectangleオブジェクトを生成してやるだけです。
すぐに実装できますね。

余談ではありますが、見つけてから検索するとすぐにドキュメントが出てきました。。。
 
Link:発見した公式ドキュメント
 
この短形を描画するメソッドを用いて、描画した短形の透明度を薄く設定し擬似的に背景色が変わっているように見せることができました。
少し強引ではありますが、これで目的の機能を実装することができました。

 

まとめ

今回はグラフ実装に関する応用的な話を致しました。
なんといっても今回の収穫は検索方法はとても重要だということですね。。。
改めて実感しました。頑張ろう。。。
とはいっても、ソースから目的のものを探すといったこともかなり為になったと思います!
このように詰まる部分もありますが、地道に頑張っていこうと思います。

この記事が少しでもみなさまのお役に立てれば幸いです。

ではまた次回!!
 
弊社開発実績はこちら

コメントを残す

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


*