近似曲線の追加

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

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下のスクリプトに置き換えます。このスクリプトは、より近似曲線に適したデータを使用して、近似曲線を seriesList オプションに追加します。このとき、以下の TrendLine 属性を使用します。

isTrendLine: true に設定すると、系列の項目が通常のデータ項目ではなく、近似曲線であるとみなされます。
label: 折れ線グラフと近似曲線とを区別できるように、この値を「Trendline」に設定して凡例に表示します。
order: この値を 4 に設定し、多項式で使用する次数として指定します（fitType のデフォルト値は polynom）。
data: データの x 値を「Year」に、y 値を「ThousandUnits」にそれぞれバインドすることで、チャートのデータに基づく近似曲線を作成します。

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> var data = [{ Year: 1999, ThousandUnits: 39.758 }, { Year: 2000, ThousandUnits: 41.215 }, { Year: 2001, ThousandUnits: 39.855 }, { Year: 2002, ThousandUnits: 41.358 }, { Year: 2003, ThousandUnits: 41.968 }, { Year:2004, ThousandUnits:44.554 }, { Year:2005, ThousandUnits:46.862 },{ Year:2006, ThousandUnits:49.918 },{ Year:2007, ThousandUnits:53.201 },{ Year:2008, ThousandUnits: 52.726 },{ Year:2009, ThousandUnits:47.772 },{ Year:2010, ThousandUnits:58.264 },{ Year:2011, ThousandUnits:59.929 }]; require(["wijmo.wijlinechart"], function () { $(document).ready(function () { $("#wijlinechart").wijlinechart({ dataSource: data, seriesList: [{ label: "World auto production", data: { x: {bind: "Year"}, y: {bind: "ThousandUnits"} } },{ isTrendline: true, label: "Trendline", order: 4, data: { x: {bind: "Year"}, y: {bind: "ThousandUnits"} } } ] }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
        var data = [{
            Year: 1999,
            ThousandUnits: 39.758
        }, {
            Year: 2000,
            ThousandUnits: 41.215
        }, {
            Year: 2001,
            ThousandUnits: 39.855
        }, {
            Year: 2002,
            ThousandUnits: 41.358
        }, {
            Year: 2003,
            ThousandUnits: 41.968
        }, {
            Year:2004,
            ThousandUnits:44.554 
        }, {
            Year:2005,
            ThousandUnits:46.862 
        },{
            Year:2006,
            ThousandUnits:49.918 
        },{
            Year:2007,
            ThousandUnits:53.201 
        },{
            Year:2008,
            ThousandUnits: 52.726
        },{
            Year:2009,
            ThousandUnits:47.772 
        },{
            Year:2010,
            ThousandUnits:58.264 
        },{
            Year:2011,
            ThousandUnits:59.929 
        }];
        require(["wijmo.wijlinechart"], function () {
        $(document).ready(function () {
            $("#wijlinechart").wijlinechart({
                dataSource: data,
                seriesList: [{
                    label: "World auto production",
                    data: {
                        x: {bind: "Year"},
                        y: {bind: "ThousandUnits"}
                    }
                  },{
                    isTrendline: true,
                    label: "Trendline",
                    order: 4,
                    data: {
                        x: {bind: "Year"},
                        y: {bind: "ThousandUnits"}
                    }
                  }
                ]
            });
        });
        });
</script>

HTML ファイルの <body> セクションは、変更の必要はありません。このウィジェットの作成には、基本的な<div> タグで十分です。
HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のようになり、チャートに近似曲線が追加されています。

関連トピック

参照