More than 3 years have passed since last update.

Yellowfin で株の値動きを分析： FusionCharts カギ足の活用

yellowfin

Posted at 2022-05-11

はじめに

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

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

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

では、実際にチャート作成手順に入っていきましょう。以下の手順では、前回と同じく、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タブ

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

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 = 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 = 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 = 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é!!

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Yellowfin で株の値動きを分析 ： FusionCharts カギ足の活用