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

関連記事

わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」

サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし

親要素の大きさに合わせてテキストをリサイズ「FitText」

「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head

カレンダー実装プラグイン「Bootstrap Calendar」

「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト

no image

時刻入力に便利な「Timepicker for Bootstrap」(Bootstrap 2)

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 目次 実装方法 モダール形式 Datepicker

画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを

no image

「jqPlot」を使って棒グラフを作成

jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。

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

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

カウントダウン プラグイン

FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd

no image

クリックするとテキストボックスにかわるラベルを実装

Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです

入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」

「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v

Comment

Message

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

*

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

    PAGE TOP ↑