ローソク足チャート「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>
関連記事
-
テキストに装飾効果を付けるプラグイン
Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa
-
画像ズーム プラグイン
画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。
-
親要素の大きさに合わせてテキストをリサイズ「FitText」
「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head
-
数値入力に便利なステッパーを実装「Numeric Stepper」
「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas
-
iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」
「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
-
カルーセル プラグイン
「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り
-
スワイプ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
Comment
jQuery | ローソク足チャート「jqPlot」 http://t.co/xfrhWxccPn