はじめに

前回、ローソク足を使った株価の値動きの分析を取り扱いました。今回は、カギ足チャートを使った株価の値動き分析を紹介したいと思います。

作成手順に入る前に、作成するチャートのイメージを紹介しておきます。
カギ足チャートは、一定以上の値幅あるいは率が上下に振れた時のみ、線を追加していくもので (前者：定額法カギ足、後者：定率法カギ足) 、値を下げている時は常に下向き、値を上げている時は常に上向きに線が追加されます。一般的には、日単位で終値の前日比を用いることが多く、大まかな値動きを確認する時に使われるチャートです。

前回記事と同じテスラ株の値動きをカギ足チャートで表現すると以下のような感じになります。横軸に日付を配置していますが、厳密には時系列の軸ではありません。

では、実際にチャート作成手順に入っていきましょう。以下の手順では、前回と同じく、NASDAQ 市場に上場するテスラ株 (銘柄コード: TSLA) の直近の値動きを取り扱ってみようと思います。
なお、カギ足チャートの作成には、Yellowfin BI のグループ会社 FusionCharts のライブラリを活用します。

1. データのダウンロードと取込

カギ足を作成するために、以下のデータを準備します。
・軸「日付」
・集計値「終値」
様々なサイトからデータを入手することが可能ですが、前回同様に『株探』のデータを使わせていただきました。

ダウンロードしたデータは、データベースのテーブルに取り込みます。直接データベースに取り込む以外にも、Yellowfin トランスフォーメーションフローを活用することも可能です。
トランスフォーメーションフロー：https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2293853

2. ビューの作成

以下の情報を参考にビューを作成します。

列名	フィールドタイプ	特記事項
date	ディメンション	日付などデータの順番を定義できるもの
closing	メトリック (集計値)	終値を使うことが多い

ビュー：https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2294284

3. グラフの作成

準備が整ったら、グラフの作成に手順を進めます。新規でレポートを作成し、以下の手順に従ってグラフを作成します。

3-1. [データ] ステップ

ビューに設定した軸と集計値を全てテーブルに配置します。

3-2. [グラフ] ステップ

[グラフ] ステップに進み、画面右側 [グラフの選択] から [JavaScriptグラフ] を選択します。

JavaScriptタブ

雛形を全て削除し、以下のコードに置き換えます。コードの処理の内容は後ほど説明します。

JS

generateChart = function(options) {
   var $chartDrawDiv = $(options.divSelector);
   var processedData = processData(options.dataset.data);
   doDrawing(processedData, $chartDrawDiv);
},

processData = function(dataset) {
    var ds = [];
    for (i=0;i<dataset.date.length;i++){
        ds.push({
            label: dataset.date[i].formatted_data,
            value: dataset.closing[i].raw_data,
        });
    }
    return ds;
},

doDrawing = function(ds, $chartDrawDiv) {
    console.log(JSON.stringify(ds));
    require(['js/chartingLibraries/fusioncharts-suite-xt/js/fusioncharts.js'], function(){
        const dataSource = {
            chart: {
                caption: "テスラ株の値動き",
                subcaption: "NASDAQ TSLA",
                numberprefix: "$",
                plottooltext: "$label: <b>$dataValue</b>",
                yAxisMinValue: 700,
                formatNumberScale: 0,
                showValues: 0,
                rallyColor: "#0000cd",
                declineColor: "#ff0000",
                BgColor: "#ffffff",
                showAlternateHGridColor: 0,
                //reversalValue: 50,
                reversalPercentage: "5%"
            },
            data: ds,
        };
        FusionCharts.ready(function() {
            var myChart = new FusionCharts({
                type: "kagi",
                renderAt: $chartDrawDiv[0],
                width: 550,
                height: 450,
                dataFormat: "json",
                dataSource
              }).render();
        });
    });
};

プレビュータブ

プレビュータブに移ると、冒頭で確認したカギ足チャートが表示されます。当該箇所にマウスをホバーすると、ツールチップで各取引日の終値が表示されます。

4. コードの内容

動作概要が分かったところで、コードの中身を見てみましょう。

generateChart

generateChart

generateChart = function(options) {
   var $chartDrawDiv = $(options.divSelector);
   var processedData = processData(options.dataset.data);
   doDrawing(processedData, $chartDrawDiv);
},

JavaScript グラフの処理において、最初に呼び出されるのが generateChart = function(options) です。
[データ] ステップでテーブルに追加した情報が、options に格納されて、メソッドに受け渡されます。
var $chartDiv = $(options.divSelector);
var processedData = processData(options.dataset.data);
doDrawing(processedData, $chartDiv);
上記 3 行で、チャートを描画するタグを定義し、データ処理とグラフ描画処理を行う関数を呼び出しています。呼び出し先の関数での処理内容は後続の個所で説明をします。

processData

processData

processData = function(dataset) {
    var ds = [];
    for (i=0;i<dataset.date.length;i++){
        ds.push({
            label: dataset.date[i].formatted_data,
            value: dataset.closing[i].raw_data,
        });
    }
    return ds;
},

Yellowfin のデータセットを JSON の配列に変換して ds にオブジェクトとして格納しています。
今回取り扱うデータであれば、以下のような JSON の書式になります。

画面は [グラフ] ステップでディベロッパーツールのコンソールから確認したものです。コードの中に console.log(JSON.stringify(ds)) を記述しておくと、データオブジェクトの中身をコンソールで確認することができます。今回の場合は、doDrawing の先頭に記述しています。デバッグに便利なので、活用してみてください。

doDrawing

doDrawing

doDrawing = function(ds, $chartDrawDiv) {
    console.log(JSON.stringify(ds));
    require(['js/chartingLibraries/fusioncharts-suite-xt/js/fusioncharts.js'], function(){
        const dataSource = {
            chart: {
                caption: "テスラ株の値動き",
                subcaption: "NASDAQ TSLA",
                numberprefix: "$",
                plottooltext: "$label: <b>$dataValue</b>",
                yAxisMinValue: 700,
                formatNumberScale: 0,
                showValues: 0,
                rallyColor: "#0000cd",
                declineColor: "#ff0000",
                BgColor: "#ffffff",
                showAlternateHGridColor: 0,
                //reversalValue: 50,
                reversalPercentage: "5%"
            },
            data: ds,
        };
        FusionCharts.ready(function() {
            var myChart = new FusionCharts({
                type: "kagi",
                renderAt: $chartDrawDiv[0],
                width: 550,
                height: 450,
                dataFormat: "json",
                dataSource
              }).render();
        });
    });
};

ライブラリにデータを受け渡し、チャートを描画する処理を記述しています。
require[] の中で、JavaScriptライブラリーを格納したディレクトリーを相対パスで記述します。
chart: {…} の中で、タイトル、単位、色、ツールチップ、線の追加条件など、チャートの見た目に関わる設定を施しています。例えば、plottooltext: "$label: <b>$dataValue</b>" でマウスを該当箇所にホバーさせた時のツールチップの中身を指定しています。rallyColor: "#0000cd" と declineColor: "#ff0000" で、上げ傾向と下げ傾向の線の色を定義しています。reversalValue: 50 あるいは reversalPercentage: "5%" で線を追加する条件を指定しています。定額法を用いる場合は reversalValue に条件を絶対値で指定します。定率法を用いる場合は reversalPercentage に条件をパーセントで指定します。上記例では 5% 以上の値動きを線の追加条件としています。
data: ds で、processData で作成した JSON の配列を、データオブジェクトとして FusionCharts に受け渡しています。
FusionCharts.ready(function() {…} の中で、チャートを描画する HTMLタグの指定や、チャートタイプの指定 type: "kagi" などを行っています。
上記以外にも、様々な設定を施すことができます。詳細はこちらをご覧ください。

5. 最後に

ローソク足やらカギ足やら、株式や債券の値動きに用いられるチャートには、日本語が使われているものが多いですね。
ちなみに、株式以外にも、債券、指数、通貨などの分析にもローソク足チャートやカギ足チャートを活用することが可能です。是非、興味のあるデータを使ってお試しください。
良いデータ分析を! See you then, Cheers!! Santé!!