近似曲線の追加

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

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

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

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> var data1 = [{ type: "Desktops", west: 5, central: 2, east: 3, Steam1: 3 }, { type: "Notebooks", west: 3, central: 2, east: 4, Steam1: 6 }, { type: "Tablets", west: 7, central: 2, east: 2, Steam1: 9 }, { type: "Phones", west: 2, central: 1, east: 5, Steam1: 5 }], pieData = [{ label: "MacBook Pro", legendEntry: true, data: 46.78, offset: 15 }, { label: "iMac", legendEntry: true, data: 23.18, offset: 0 }, { label: "MacBook", legendEntry: true, data: 20.25, offset: 0 }]; require(["wijmo.wijcompositechart"], function () { $(document).ready(function () { $("#wijcompositechart").wijcompositechart({ dataSource: data1, data: {x: {bind: "type"}}, seriesList: [{ type: "column", label: "West", data: { y: {bind: "west"} } },{ type: "pie", center: {x: 70, y: 70}, radius: 30, dataSource: pieData, data: { label: {bind: "label"}, value: {bind: "data"}, offset: {bind: "offset"} } },{ type: "line", label: "Steam1", data: { y: {bind: "Steam1"} } },{ isTrendline: true, label: "Trendline for West", order: 4, data: { y: {bind: "west"} } } ] }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
        var data1 = [{
            type: "Desktops",
            west: 5,
            central: 2,
            east: 3,
            Steam1: 3
        }, {
            type: "Notebooks",
            west: 3,
            central: 2,
            east: 4,
            Steam1: 6
        }, {
            type: "Tablets",
            west: 7,
            central: 2,
            east: 2,
            Steam1: 9
        }, {
            type: "Phones",
            west: 2,
            central: 1,
            east: 5,
            Steam1: 5
        }], pieData = [{
            label: "MacBook Pro",
            legendEntry: true,
            data: 46.78,
            offset: 15
        }, {
            label: "iMac",
            legendEntry: true,
            data: 23.18,
            offset: 0
        }, {
            label: "MacBook",
            legendEntry: true,
            data: 20.25,
            offset: 0
        }];
        require(["wijmo.wijcompositechart"], function () {
        $(document).ready(function () {
            $("#wijcompositechart").wijcompositechart({
                dataSource: data1,
                data: {x: {bind: "type"}},
                seriesList: [{
                    type: "column",
                    label: "West",
                    data: {
                        y: {bind: "west"}
                    }
                  },{
                    type: "pie",
                    center: {x: 70, y: 70},
                    radius: 30,
                    dataSource: pieData,
                    data: {
                        label: {bind: "label"},
                        value: {bind: "data"},
                        offset: {bind: "offset"}
                    }
                  },{
                    type: "line",
                    label: "Steam1",
                    data: {
                        y: {bind: "Steam1"}
                    }
                  },{
                    isTrendline: true,
                    label: "Trendline for West",
                    order: 4,
                    data: {
                        y: {bind: "west"}
                    }
                  }
                ]
            });
        });
        });
</script>

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

関連トピック

参照