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

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

  1. HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下のスクリプトに置き換えます。このスクリプトは、より近似曲線に適したデータを使用して、近似曲線を seriesList オプションに追加します。このとき、以下の TrendLine 属性を使用します。
    • isTrendLine: true に設定すると、系列の項目が通常のデータ項目ではなく、近似曲線であるとみなされます。
    • label: 折れ線グラフと近似曲線とを区別できるように、この値を「Trendline」に設定して凡例に表示します。
    • order: この値を 4 に設定し、多項式で使用する次数として指定します（fitType のデフォルト値は polynom）。
    • data: データの x 値を「year」に、y 値を「rating」にそれぞれバインドすることで、チャートのデータに基づく近似曲線を作成します。
    スクリプト
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
        var data = [{ year: 1994, rating: 9.2 },
                        { year: 1972, rating: 9.2 },
                        { year: 1974, rating: 9.0 },
                        { year: 1994, rating: 8.9 },
                        { year: 1966, rating: 8.9 },
                        { year: 2008, rating: 8.9 },
                        { year: 1957, rating: 8.9 },
                        { year: 1993, rating: 8.9 },
                        { year: 2003, rating: 8.8 },
                        { year: 1999, rating: 8.8 },
                        { year: 1980, rating: 8.8 },
                        { year: 2001, rating: 8.8 },
                        { year: 1975, rating: 8.7 },
                        { year: 1990, rating: 8.7 },
                        { year: 2010, rating: 8.7 },
                        { year: 1954, rating: 8.7 },
                        { year: 1977, rating: 8.7 },
                        { year: 1994, rating: 8.7 },
                        { year: 1999, rating: 8.7 },
                        { year: 2002, rating: 8.7 },
                        { year: 2002, rating: 8.6 },
                        { year: 1968, rating: 8.6 },
                        { year: 1995, rating: 8.6 },
                        { year: 1991, rating: 8.6 },
                        { year: 1942, rating: 8.6 },
                        { year: 1995, rating: 8.6 },
                        { year: 1981, rating: 8.6 },
                        { year: 1954, rating: 8.6 },
                        { year: 1946, rating: 8.6 },
                        { year: 1960, rating: 8.6 },
                        { year: 1994, rating: 8.6 },
                        { year: 1950, rating: 8.5 },
                        { year: 1998, rating: 8.5 },
                        { year: 2000, rating: 8.5 },
                        { year: 1991, rating: 8.5 },
                        { year: 1998, rating: 8.5 },
                        { year: 1979, rating: 8.5 },
                        { year: 1931, rating: 8.5 },
                        { year: 1964, rating: 8.5 },
                        { year: 1979, rating: 8.5 },
                        { year: 2001, rating: 8.5 },
                        { year: 1936, rating: 8.5 },
                        { year: 1997, rating: 8.5 },
                        { year: 1959, rating: 8.5 },
                        { year: 1985, rating: 8.5 },
                        { year: 2002, rating: 8.4 },
                        { year: 1941, rating: 8.4 },
                        { year: 1980, rating: 8.4 },
                        { year: 2013, rating: 8.4 },
                        { year: 2006, rating: 8.4 },
                        { year: 1931, rating: 8.4 },
                        { year: 1957, rating: 8.4 },
                        { year: 2011, rating: 8.4 },
                        { year: 1958, rating: 8.4 },
                        { year: 1999, rating: 8.4 },
                        { year: 2012, rating: 8.4 },
                        { year: 2000, rating: 8.4 },
                        { year: 2012, rating: 8.4 },
                        { year: 1999, rating: 8.4 },
                        { year: 1986, rating: 8.4 },
                        { year: 1944, rating: 8.4 },
                        { year: 1976, rating: 8.4 }
        ];
        require(["wijmo.wijscatterchart"], function () {
        $(document).ready(function () {
            $("#wijscatterchart").wijscatterchart({
                dataSource: data,
                seriesList: [{
                    label: "Annual rating",
                    data: {
                        x: {bind: "year"},
                        y: {bind: "rating"}
                    }
                  },{
                    isTrendline: true,
                    label: "Trendline",
                    order: 4,
                    data: {
                        x: {bind: "year"},
                        y: {bind: "rating"}
                    }
                  }
                ]
            });
        });
        });
</script>
  2. HTML ファイルの <body> セクションは、変更の必要はありません。このウィジェットの作成には、基本的な<div> タグで十分です。
  3. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のようになり、チャートに近似曲線が追加されています。

関連トピック

TrendLines (近似曲線)
ScatterChart

参照

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

 

 

Copyright © GrapeCity inc. All rights reserved.