Wijmo UI for the Web
近似曲線の追加
Wijmo ユーザーガイド > ウィジェット > Chart ウィジェット > CandlestickChart > 操作手順 > 近似曲線の追加
全て展開全て展開
すべて折りたたむすべて折りたたむ

「クイックスタート」」の例を基に、seriesList オプションの各属性を使用して、チャートに近似曲線を追加できます。

  1. HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下のスクリプトに置き換えます。このスクリプトは、より近似曲線に適したデータを使用して、近似曲線を seriesList オプションに追加します。このとき、以下の TrendLine 属性を使用します。
    • isTrendLine: true に設定すると、系列の項目が通常のデータ項目ではなく、近似曲線であるとみなされます。
    • order: この値を 4 に設定し、多項式で使用する次数として指定します（fitType のデフォルト値は polynom）。
    • data: データの x 値を「x」に、y 値を「close」にそれぞれバインドすることで、チャートの終値に基づく近似曲線を作成します。
    スクリプト
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
        var data = [{
            x: new Date("1/2/2012"),
            high: 15,
            low: 13,
            open: 13.9,
            close: 13.2
        }, {
            x: new Date("1/3/2012"),
            high: 14,
            low: 12,
            open: 13.2,
            close: 12.8
        }, {
            x: new Date("1/4/2012"),
            high: 13,
            low: 11,
            open: 12.8,
            close: 11.7
        }, {
            x: new Date("1/5/2012"),
            high: 12,
            low: 11,
            open: 11.7,
            close: 11.2
        }, {
            x: new Date("1/6/2012"),
            high: 11.5,
            low: 10,
            open: 11.2,
            close: 10.5
        }, {
            x: new Date("1/9/2012"),
            high: 10.9,
            low: 9,
            open: 10.5,
            close: 9.4
        }, {
            x: new Date("1/10/2012"),
            high: 10,
            low: 8,
            open: 9.4,
            close: 8.9
        }, {
            x: new Date("1/11/2012"),
            high: 9,
            low: 7.5,
            open: 8.9,
            close: 8.4
        }, {
            x: new Date("1/12/2012"),
            high: 9.5,
            low: 7.9,
            open: 8.4,
            close: 8
        }, {
            x: new Date("1/13/2012"),
            high: 10,
            low: 7.5,
            open: 8,
            close: 8.6
        }, {
            x: new Date("1/16/2012"),
            high: 12,
            low: 8.6,
            open: 8.6,
            close: 11
        }, {
            x: new Date("1/17/2012"),
            high: 11,
            low: 4.4,
            open: 11,
            close: 6.2
        }, {
            x: new Date("1/18/2012"),
            high: 14,
            low: 4.2,
            open: 6.2,
            close: 13.8
        }, {
            x: new Date("1/19/2012"),
            high: 16,
            low: 8,
            open: 13.8,
            close: 15
        }, {
            x: new Date("1/20/2012"),
            high: 20,
            low: 9,
            open: 15,
            close: 14
        }, {
            x: new Date("1/23/2012"),
            high: 18,
            low: 11,
            open: 14,
            close: 12
        }, {
            x: new Date("1/24/2012"),
            high: 17,
            low: 10,
            open: 12,
            close: 16
        }, {
            x: new Date("1/25/2012"),
            high: 17.5,
            low: 12.2,
            open: 16,
            close: 15
        }, {
            x: new Date("1/26/2012"),
            high: 20,
            low: 12,
            open: 15,
            close: 17
        }, {
            x: new Date("1/27/2012"),
            high: 22,
            low: 16,
            open: 17,
            close: 18
        }, {
            x: new Date("1/30/2012"),
            high: 21,
            low: 15.5,
            open: 18,
            close: 17.2
        }, {
            x: new Date("1/31/2012"),
            high: 22.5,
            low: 16,
            open: 17.2,
            close: 18.5
        }];
        require(["wijmo.wijcandlestickchart"], function () {
        $(document).ready(function () {
            $("#wijcandlestickchart").wijcandlestickchart({
                dataSource: data,
                legend: {visible: false},
                seriesList: [{
                    data: {
                        x: {bind: "x"}, 
                        high: {bind: "high"}, 
                        low: {bind: "low"}, 
                        open: {bind: "open"}, 
                        close: {bind: "close"}
                    }
                  },{
                    isTrendline: true,
                    order: 4,
                    label: "Trend",
                    data: {
                        x: {bind: "x"}, 
                        y: {bind: "close"} 
                    }
                  }
                ]
            });
        });
        });
</script>
  2. HTML ファイルの <body> セクションは、変更の必要はありません。このウィジェットの作成には、基本的な<div> タグで十分です。
  3. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のようになり、チャートに近似曲線が追加されています。

関連トピック

TrendLines (近似曲線)
CandlestickChart

参照

wijcandlestickchart メソッド
TrendlineRender クラス
dataSource フィールド
legend フィールド
seriesList フィールド

 

 

Copyright © GrapeCity inc. All rights reserved.