バツイチとインケンのエンジニアブログ
プログラムやプログラムじゃないこと

JSで株のローソク足チャートを生成するためのjQueryプラグイン jqPlot

2015-02-06
書いた人 : インケン
カテゴリ : JavaScript | タグ : jquery

jqPlotとは?

jqPlotはグラフチャートを簡単に生成できるjQueryプラグインです。

折れ線グラフや棒グラフ、円グラフなどの一般的なグラフ以外にも、ローソク足やいかり足チャートも簡単に作れちゃうというすぐれもの。

まずはここから一式ダウンロード

 

では早速、日足チャートを表示してみましょう。

まずは、HTMLから

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>ローソク足チャート</title>

    <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
    <!--[if lt IE 9]>
      <script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script>
    <![endif]-->
    <script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/plugins/jqplot.dateAxisRenderer.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/plugins/jqplot.ohlcRenderer.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
  </head>

  <body>
    <div id="chart"></div>
    <script language="javascript" type="text/javascript" src="js/chart.js"></script>
  </body>
</html>

jquery.jqplot.min.jsが本体で、jqplot.dateAxisRenderer.min.jsが、グラフに日付を使うためのプラグイン、
jqplot.ohlcRenderer.min.jsが、ローソク足チャートを生成するためのプラグイン、
jquery.jqplot.min.cssは、jqplotのcssです。これらはダウンロードした中に一式入っています。(jquery.min.js excanvas.min.jsも)

んで、<div id=”chart”></div>にチャートが表示されます。

では、次に、チャートを表示するためのchart.jsです。


$( function() {
  var data= [
                 ["2015-01-05",1177,1255,1168,1218],
                 ["2015-01-06",1190,1209,1171,1174],
                 ["2015-01-07",1150,1184,1143,1168],
                 ["2015-01-08",1197,1205,1155,1164],
                 ["2015-01-09",1178,1178,1139,1148],
                 ["2015-01-13",1118,1158,1118,1138],
                 ["2015-01-14",1125,1150,1125,1133],
                 ["2015-01-15",1138,1149,1132,1140],
                 ["2015-01-16",1132,1134,1051,1112],
                 ["2015-01-19",1101,1112,1075,1082],
                 ["2015-01-20",1075,1115,1075,1107],
                 ["2015-01-21",1110,1117,1096,1101],
                 ["2015-01-22",1106,1113,1096,1112]
            ]
   $.jqplot('chart',[data],{

        axes:{
             xaxis:{
                    renderer: $.jqplot.DateAxisRenderer,
                    min: '2015-01-04',
                    max: '2015-01-23',
                    tickOptions:{ formatString: '%m/%d' }
                  },
             },
       seriesDefaults: {
              renderer: $.jqplot.OHLCRenderer,
              rendererOptions: {
                   candleStick: true,
                   fillUpBody: false,
                   fillDownBody: true,
                   upBodyColor: 'red',
                   downBodyColor: '#4169e1'
              }
       }
   });
});

dataの渡し方は以下の通りです

[
    [ 日付, 始値, 高値, 安値, 終値 ] ,
    [ 日付, 始値, 高値, 安値, 終値 ] ,
    ...
]

これを表示するとこんな感じに。

スクリーンショット 2015-02-06 17.18.09

日足チャートの土日の抜けたデータは詰めてくれないので、空いてしまいます。

あと、minとmaxの日付は、データの最小最大の日付より小さく(大きく)指定しないと、外枠にかぶっちゃうので注意です。

candleStickパラメーターがtrueだとローソク足で、falseだといかり足です。

それ以外にもいろいろパラメーターを設定することができるので、是非試してみてください。

 

このエントリーをはてなブックマークに追加
Tweet

← IPython Notebook をインストールしてsupervisordでプロセス管理したい
あなたのPythonを爆速にする7つの方法 →

 

最近書いた記事

  • Ryzen7 3800XT でmini ITXオープンフレームPCを作る
  • Pythonで機械学習入門 競馬予測
  • HP ENVY 15 クリエイターモデルレビューとRAID0解除
  • JRA-VAN データラボを使って、競馬データを収集する
  • Surface Pro 3 にubuntu18.04を入れる

カテゴリー

  • Android
  • Apache Flink
  • API
  • AWS
  • bazel
  • BigQuery
  • Cassandra
  • Docker
  • Druid
  • Elasticsearch
  • Git
  • Golang
  • gradle
  • HDFS
  • JavaScript
  • jvm
  • Linux
  • MongoDB
  • MySQL
  • Nginx
  • Nodejs
  • PaaS
  • PHP
  • Python
  • RabbitMQ
  • Raspberry Pi
  • React Native
  • Redis
  • Riak
  • rust
  • scala
  • Scheme
  • SEO
  • solr
  • Spark
  • spray
  • Sublime Text
  • Swift
  • Tableau
  • Unity
  • WebIDE
  • Wordpress
  • Youtube
  • ひとこと
  • カンファレンス
  • スケジューラ
  • マイクロマウス
  • 広告
  • 技術じゃないやつ
  • 株
  • 機械学習
  • 競馬
  • 自作キーボード
  • 自然言語処理

アーカイブ

  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年5月
  • 2018年3月
  • 2018年2月
  • 2017年9月
  • 2017年8月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年1月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年8月
  • 2015年6月
  • 2015年5月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年9月
  • 2014年6月
  • 2014年5月
  • 2014年3月
  • 2014年2月
  • 2014年1月
  • 2013年12月
  • 2013年11月
  • 2013年10月
  • 2013年9月
  • 2013年8月

書いた人

  • バツイチちゃん
  • インケンくん

このブログについて

エンジニアとしての考え方が間逆な2人がしょーもないこと書いてます。

バツイチ

アイコン

IT業界で働くエンジニアです。名前の通りバツイチです。
理論や抽象的概念が好きだけど人に説明するのが下手。

インケン

アイコン

バツイチちゃんと同じ業界で働いています。
理論とか開発手法とかは正直どうでもよくて、
生活する上で役に立つことに使いたい

Copyright 2025 バツイチとインケンのエンジニアブログ