ローソク足チャート「jqPlot」
「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。
一つのプロットでOHLC(Open, High, Low, Close)
それぞれ、Openは始値、Highは高値、Lowは安値、Closeは終値になります。
サンプル
スクリプト
<!-- グラフ表示に必要なスクリプト --> <script src="jquery.min.js" type="text/javascript"></script> <link href= "jquery.jqplot.min.css" type="text/css" rel="stylesheet"> <script src="jquery.jqplot.min.js" type="text/javascript"></script> <script src="excanvas.min.js" type="text/javascript"></script> <!-- ローソク足チャートの表示に必要なプラグイン --> <script src="plugins/jqplot.ohlcRenderer.min.js" type="text/javascript"></script> <!-- 軸に日付を使用するのに必要なプラグイン --> <script src="plugins/jqplot.dateAxisRenderer.min.js" type="text/javascript"></script>
実装
<div id="div1193"></div> <script type="text/javascript"> $(document).ready(function(){ // オプション options = { title:{ text: '日経平均株価 推移' // グラフのタイトル }, axes:{ // 軸 // 横軸(x軸) xaxis:{ renderer: $.jqplot.DateAxisRenderer, // プラグイン min: '2008-09', // 軸開始の値 max: '2013-12', // 軸終了の値 tickOptions: { formatString:'%Y/%m' // 表示フォーマット }, label:'month', // ラベル }, // 縦軸(y軸) yaxis:{ label: '日経平均株価(円)', // ラベル } }, series: [{ renderer: $.jqplot.OHLCRenderer, rendererOptions:{ candleStick:true } }] } // 表示データ data = [ ['2008-10',11396.61,11456.64,6994.90,8576.98], ]; // グラフ表示する#div, 表示データ, オプション $.jqplot( 'div1193', [data], options); }); </script>
関連記事
-
-
入力数値の桁区切り挿入
ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu
-
-
ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」
「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
商用利用フリー Lightbox プラグイン
商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ
-
-
カウントダウン プラグイン
FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
-
シンプルにポップアップを実装できる「PopBox」
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
実装方法が選べるツールチップ用プラグイン「Smallipop」
Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします
Comment
jQuery | ローソク足チャート「jqPlot」 http://t.co/xfrhWxccPn