ui.igFinancialChart

ui.igFinancialChart_image

igFinancialChart は軽量で高パフォーマンスなチャートです。このチャートは、シンプルで直感的な API を使用した財務データの表示を簡単に構成できます。データ (コレクションまたはコレクションのコレクション) をバインドするだけで後の作業はチャートがすべて行います。

以下のコード スニペットは、igFinancialChart コントロールを初期化する方法を示します。

igFinancialChart コントロールに必要なスクリプトとテーマを参照する方法については、Ignite UI の JavaScript リソースの使用および Ignite UI のスタイリングとテーマをご覧ください。

コード サンプル

      <!DOCTYPE html>
      <html>
      <head>       
        <title>Ignite UI igFinancialChart</title>
             
        <link href="local/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
        <link href="local/css/structure/infragistics.css" rel="stylesheet" />
     
        <link rel="stylesheet" href="local/css/structure/modules/infragistics.ui.chart.css" />
        <link rel="stylesheet" href="local/css/structure/modules/infragistics.ui.financialchart.css" />
 
        <script src="https://igniteui.com/js/modernizr.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
             
        <script src="local/js/infragistics.core.js"></script>
        <script src="local/js/infragistics.dv.js"></script>     
     
      </head>
      <body>
     
        <div id="chart" style="width:800px;height:600px"></div>
     
        <script>
     
 
            $(function () {
                var data = [];
                var open = 500
                var close = 0;
                var high = 0;
                var low = 0;
                var mod = 0;
                var volume = 10000;
                var total = 30;
                var range = 5;
                var date = new Date(126240840000);
 
                for(i=1; i<total; i++){
                    low = open - (getRandomBetween(0.1, 0.9) * range);
                    high = open + (getRandomBetween(0.1, 0.9) * range);
                    mod = getRandomBetween(0.1, 0.9) - 0.4;
                    close = open + (mod * range);
 
                    var item = {"Low": low, "High": high, "Volume": volume, "Date": date, "Open": open, "Close": close};
                    data.push(item);
 
                    open = open + (mod * range * 2);
                    volume = volume + (mod * range * 100);
                    date = new Date(126240840000 + (86400000 * i));
                }
 
                $("#chart").igFinancialChart({
                    dataSource: data
                });
     
            });
 
            function getRandomBetween(min, max){
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
 
        </script>   
    </body>
</html>

関連サンプル

関連トピック

依存関係

jquery.js
jquery-ui.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.datasource.js
infragistics.templating.js
infragistics.ext_core.js
infragistics.ext_collections.js
infragistics.ext_ui.js
infragistics.dv_core.js
infragistics.dv_datasource.js
infragistics.dv_dataseriesadapter.js
infragistics.dv_geometry.js
infragistics.dv_jquerydom.js
infragistics.dv_interactivity.js
infragistics.dv_geo.js
infragistics.datachart_core.js
infragistics.datachart_interactivity.js
infragistics.datachart_extendedaxes.js
infragistics.dvcommonwidget.js
infragistics.ui.basechart.js
infragistics.financialchart.js
infragistics.ui.widget.js
infragistics.ui.financialchart.js

継承

Copyright © 1996 - 2025 Infragistics, Inc. All rights reserved.