ローソク足チャート「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>
関連記事
-
-
レスポンシブ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide
-
-
iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」
「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
画像ズーム プラグイン
画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。
-
-
「jqPlot」を使って棒グラフを作成
jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。
-
-
マウスオーバーでキャプション表示してくれる プラグイン
画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成
-
-
ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」
「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ
-
-
ポップアップ・モーダル ウィンドウ プラグイン
ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers
-
-
テキストに動きをつけるプラグイン
テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit
-
-
select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」
「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら
Comment
jQuery | ローソク足チャート「jqPlot」 http://t.co/xfrhWxccPn