近似曲線の追加

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

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

isTrendLine: true に設定すると、系列の項目が通常のデータ項目ではなく、近似曲線であるとみなされます。
order: この値を 4 に設定し、多項式で使用する次数として指定します（fitType のデフォルト値は polynom）。
label: この値を「Trend」に設定して、凡例テキストとして表示します（legendEntry のデフォルト値は true）。
data: データの y 値を「domesticData」に設定することで、チャートの数値データに基づく近似曲線を作成します。

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> var datesData = [new Date('1/1/2013'), new Date('2/1/2013'), new Date('3/1/2013'), new Date('4/1/2013'), new Date('5/1/2013'), new Date('6/1/2013'), new Date('7/1/2013'), new Date('8/1/2013'), new Date('9/1/2013'), new Date('10/1/2013'), new Date('11/1/2013'), new Date('12/1/2013')]; var domesticData = [1983, 2343, 2593, 2283, 2574, 2838, 2382, 2634, 2938, 2739, 2983, 3493]; require(["wijmo.wijbarchart"], function () { $(document).ready(function () { $("#wijbarchart").wijbarchart({ data: {x: datesData}, seriesList: [{ label: "Actual", legendEntry: true, data: {y: domesticData} },{ isTrendline: true, order: 4, label: "Trend", data: {y: domesticData} } ] }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
        var datesData = [new Date('1/1/2013'), new Date('2/1/2013'), new Date('3/1/2013'), new Date('4/1/2013'), new Date('5/1/2013'), new Date('6/1/2013'), new Date('7/1/2013'), new Date('8/1/2013'), new Date('9/1/2013'), new Date('10/1/2013'), new Date('11/1/2013'), new Date('12/1/2013')];
        var domesticData = [1983, 2343, 2593, 2283, 2574, 2838, 2382, 2634, 2938, 2739, 2983, 3493];
        require(["wijmo.wijbarchart"], function () {
        $(document).ready(function () {
            $("#wijbarchart").wijbarchart({
                data: {x: datesData},
                seriesList: [{
                    label: "Actual",
                    legendEntry: true,
                    data: {y: domesticData}
                  },{
                    isTrendline: true,
                    order: 4,
                    label: "Trend",
                    data: {y: domesticData}
                    }
                ]
            });
        });
        });
</script>

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

関連トピック

参照