近似曲線の追加

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

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

isTrendLine: true に設定すると、系列の項目が通常のデータ項目ではなく、近似曲線であるとみなされます。
order: この値を 4 に設定し、多項式で使用する次数として指定します（fitType のデフォルト値は polynom）。
data: データの x 値を Income に、y 値を LifeExpectancy にそれぞれバインドすることで、チャートの数値データに基づく近似曲線を作成します。

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> var data = [{ Income: 7931, LifeExpectancy: 73, Population: 1340 }, { Income: 2972, LifeExpectancy: 65, Population: 1150 }, { Income: 42066, LifeExpectancy: 78, Population: 309 }, { Income: 30866, LifeExpectancy: 83, Population: 126 }, { Income: 14318, LifeExpectancy: 69, Population: 140 }, { Income: 374, LifeExpectancy: 48, Population: 72 }, { Income: 9284, LifeExpectancy: 52, Population: 43 }, { Income: 11754, LifeExpectancy: 77, Population: 112 }, { Income: 31217, LifeExpectancy: 80, Population: 61 }]; require(["wijmo.wijbubblechart"], function () { $(document).ready(function () { $("#wijbubblechart").wijbubblechart({ dataSource: data, legend: {visible: false}, seriesList: [{ data: { x: {bind: "Income"}, y: {bind: "LifeExpectancy"}, y1: {bind: "Population"} } },{ isTrendline: true, order: 4, label: "Trend", data: { x: {bind: "Income"}, y: {bind: "LifeExpectancy"}, } } ] }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
        var data = [{
            Income: 7931,
            LifeExpectancy: 73,
            Population: 1340
        }, {
            Income: 2972,
            LifeExpectancy: 65,
            Population: 1150
        }, {
            Income: 42066,
            LifeExpectancy: 78,
            Population: 309
        }, {
            Income: 30866,
            LifeExpectancy: 83,
            Population: 126
        }, {
            Income: 14318,
            LifeExpectancy: 69,
            Population: 140
        }, {
            Income: 374,
            LifeExpectancy: 48,
            Population: 72
        }, {
            Income: 9284,
            LifeExpectancy: 52,
            Population: 43
        }, {
            Income: 11754,
            LifeExpectancy: 77,
            Population: 112
        }, {
            Income: 31217,
            LifeExpectancy: 80,
            Population: 61
        }];
        require(["wijmo.wijbubblechart"], function () {
        $(document).ready(function () {
            $("#wijbubblechart").wijbubblechart({
                dataSource: data,
                legend: {visible: false},
                seriesList: [{
                    data: {
                        x: {bind: "Income"}, 
                        y: {bind: "LifeExpectancy"}, 
                        y1: {bind: "Population"}
                    }
                  },{
                    isTrendline: true,
                    order: 4,
                    label: "Trend",
                    data: {
                        x: {bind: "Income"}, 
                        y: {bind: "LifeExpectancy"}, 
                    }
                  }
                ]
            });
        });
        });
</script>

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

関連トピック

参照