Wijmo UI for the Web
近似曲線の追加
全て展開全て展開
すべて折りたたむすべて折りたたむ

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

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

関連トピック

参照

 

 


Copyright © GrapeCity inc. All rights reserved.