平均足を例にコンテナインジケーターを作成する

概要

コンテナインジケーターの作成方法を平均足を例に説明します。

コンテナインジケーターとは、「高さ」を持ち、単独で表示できるインジケーターです。
登録時にinitialHeightプロパティを設定するとContainerIndicatorを継承したクラスとなります。

アイテムインジケーターとは、単独では表示できず、コンテナインジケーターに組み込んで表示するインジケーターです。

アイテムインジケーターとの共通箇所は説明を省略します。必要に応じてアイテムインジケーターの説明も参照してください。
参照：単純移動平均を作る

操作

インジケーター「新規登録>コンテナインジケーター」からインジケーター作成画面を開いてください。

参照：インジケーター操作

コンテナインジケーターの作成

コンテナインジケーターを作成するには登録時にinitialHeightプロパティを設定してください。作成するオブジェクトにinitialHeightを設定するか、paramsプロパティにinitialHeightが含まれている場合にコンテナインジケーターとなります。

コンテナインジケーターをチャートに追加した時にinitialHeightプロパティが適切でない場合実行時エラーになります。

//例1：作成するオブジェクトに直接initialHeightを設定する場合
{
    name: "totor.containerIndicator1"
    ,initialHeight:"100px"
    , onInit () {/* 省略*/    }
}

//例2：paramsプロパティの中でinitialHeightを設定する場合
{
    name: "totor.containerIndicator2"
    , onInit () {
        this.initialHeight=this.params.initialHeight                
    }
    , params: [
        {initialHeight: "25%"}//1'
    ]
}

ここでは平均足を例にコンテナインジケータの実装方法の説明をします。

下記のソースを入力、登録してください。

{
    name: "tutor.HeikinAshi1"
    , onInit () {
        const {initialHeight , upColor , downColor} = this.params;
        this.initialHeight=initialHeight;//1'
        const [openBuffer , highBuffer , lowBuffer , closeBuffer] = this.addCandleStickBuffer([//1
            upColor,downColor
        ]);
        this.openBuffer = openBuffer;
        this.highBuffer = highBuffer;
        this.lowBuffer = lowBuffer;
        this.closeBuffer = closeBuffer;
        this.shortName="heikin"
        this.isShowDefaultScaleLine=true//2
    }
    , onChartChange ({index, times, opens, highs, lows, closes, spreads,isBarChanged}) {
        if(index==0){
             return; //4
        }
        const preOpen = opens.get(index - 1),
            preClose = closes.get(index - 1);
        const openVal = (preOpen + preClose) / 2,
            highVal = highs.get(index),
           lowVal = lows.get(index),
            closeVal = (opens.get(index) + highs.get(index) + lows.get(index) + closes.get(index)) / 4;
        this.openBuffer.set(index, (preOpen + preClose) / 2);
        this.highBuffer.set(index, highs.get(index));
        this.lowBuffer.set(index, lows.get(index));
        this.closeBuffer.set(index, (opens.get(index) + highs.get(index) + lows.get(index) + closes.get(index)) / 4);
    }
    ,getDisplayData(index){
         return [
             {key:'open',rate:this.openBuffer.get(index)},
             {key:'close',rate:this.closeBuffer.get(index)},
         ]
     }
    , params: [
        { initialHeight: "25%" },//1
        {upColor:"blue"},
        {downColor:"red"},
    ]
}

11'	チャート追加時にユーザーが変更できるようにinitialHeightをparamsに定義しています。チャート追加時によばれるonInitの中でオブジェクトに設定しています。
2	addCandleStickBufferメソッドはローソク足を描画するインジケーターバッファーを格納した配列を戻します。参照：addCandleStickBuffer
3	メインローソク足と同様のレートラインを表示する設定をしています。参照：isShowDefaultScaleLine 独自のレートラインを設定する場合はshowScaleLineを参照してください。参照：showScaleLine
4	平均足はindex:0は計算できないため、index:0を無視しています。 index:0を無視しない場合、高値と安値は計算可能の為、ヒゲだけが描画されます。

アイテムインジケーターをドロップ可能にする

ユーザー作成のコンテナインジケーターは規定では他のアイテムインジケーターをドロップすることはできません。acceptDropFromメソッドを実装すれば、この動作を変更することができます。

参照：acceptDropFrom

acceptDropFromは仕様変更の可能性があります。

既定のコンテナインジケーター「メインローソク足」は全てのアイテムインジケーターがドロップ可能です。

{
    name: "tutor.HeikinAshi2"
    , onInit () {
        const {initialHeight , upColor , downColor} = this.params;
        this.initialHeight=initialHeight;
        const [openBuffer , highBuffer , lowBuffer , closeBuffer] = this.addCandleStickBuffer([//1
            upColor,downColor
        ]);
        this.openBuffer = openBuffer;
        this.highBuffer = highBuffer;
        this.lowBuffer = lowBuffer;
        this.closeBuffer = closeBuffer;
        this.shortName="heikin"
        this.isShowDefaultScaleLine=true
    }
    , onChartChange (index, times, opens, highs, lows, closes, spreads) {
        if(index==0){
             return;
        }
        const preOpen = opens.get(index - 1),
            preClose = closes.get(index - 1);
        const openVal = (preOpen + preClose) / 2,
            highVal = highs.get(index),
           lowVal = lows.get(index),
            closeVal = (opens.get(index) + highs.get(index) + lows.get(index) + closes.get(index)) / 4;
        this.openBuffer.set(index, (preOpen + preClose) / 2);
        this.highBuffer.set(index, highs.get(index));
        this.lowBuffer.set(index, lows.get(index));
        this.closeBuffer.set(index, (opens.get(index) + highs.get(index) + lows.get(index) + closes.get(index)) / 4);
    }
    , acceptDropFrom:function(){//1
        return true;
    }        
    ,getDisplayData(index){
         return [
             {key:'open',rate:this.openBuffer.get(index)},
             {key:'close',rate:this.closeBuffer.get(index)},
         ]
     }
    , params: [
        { initialHeight: "25%" },
        {upColor:"blue"},
        {downColor:"red"},
    ]
}

1	全てのアイテムインジケーターをドロップ可能にしています。インジケーター名をもとにインジケーターごとにドロップ可否を設定することも可能です。参照：acceptDropFrom