ローソク足チャート「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>
関連記事
-
-
クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
-
「jqPlot」を使って円グラフを作成
Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更
-
-
「jqPlot」を使って棒グラフを作成
jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。
-
-
テキストエリアを自動的にリサイズしてくれる「Autosize」
「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し
-
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま
-
-
日付入力に便利な「Datepicker for Bootstrap」
「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot
-
-
Lightboxなどが実装できるプラグイン「Magnific Popup」
「Magnific Popup」はlightboxを実装できるjQueryプラグインです。 この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい
-
-
親要素の大きさに合わせてテキストをリサイズ「FitText」
「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head
-
-
select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」
「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら
Comment
jQuery | ローソク足チャート「jqPlot」 http://t.co/xfrhWxccPn