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

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

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

関連トピック

参照

 

 


Copyright © GrapeCity inc. All rights reserved.