ローソク足チャート「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>
  • このエントリーをはてなブックマークに追加

関連記事

親要素の大きさに合わせて画像をリサイズ「imgLiquid」

「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装

Wysiwygエディタ用プラグイン「CKEditor」

「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表

no image

スワイプ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からスワイプ操作で画像をスライドできるものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「b

シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」

「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション

Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」

「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン

no image

定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」

PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや

入力数値の桁区切り挿入

ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu

no image

バリデーション プラグイン

Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2

ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ

no image

シンプルにポップアップを実装できる「PopBox」

「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑