ローソク足チャート「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>
関連記事
-
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
-
-
親要素の大きさに合わせてテキストをリサイズ「FitText」
「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
「jqPlot」 カスタマイズ
以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし
-
-
クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです
-
-
数値入力に便利なステッパーを実装「Numeric Stepper」
「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas
-
-
日付入力に便利な「Datepicker for Bootstrap」
「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot
-
-
テーブル・リスト要素を便利にしてくれるプラグイン
レスポンシブに対応したテーブルを実装できる「FooTable」 リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変
-
-
テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」
「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
Comment
jQuery | ローソク足チャート「jqPlot」 http://t.co/xfrhWxccPn