ui.igShapeChart

ui.igShapeChart_image

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

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

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

コード サンプル

      <!DOCTYPE html>
      <html>
      <head>
        <title>Ignite UI igShapeChart</title>
 
        <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>
 
        <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />   
        <link href="css/structure/modules/infragistics.ui.shared.css" rel="stylesheet" />
        <link href="css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" />
          <link href="css/structure/modules/infragistics.ui.shapechart.css" rel="stylesheet" />   
   
        <script src="js/infragistics.core.js"></script>
        <script src="js/infragistics.dv.js"></script>  
   
      </head>
 
      <body>
 
      <style>
          div
        {
            display: inline-block;
            vertical-align: top
        }
      </style>
 
 
      <div id="shapeChart"></div>
      <div id="legend"></div>
 
      <script>
         
            var data = [
            {
                "Units": 100, "Revenue": 1800, "VariableCost": 600, "FixedCost": 1000,
            }];
              
         $(function () {            
            $("#shapeChart").igShapeChart({               
                dataSource: data,
                        thickness: 3,
                width: "500px",
                height: "500px",
                yAxisTitle: "Price ($)",
                xAxisTitle: "Number of Units",               
                brushes: ["#7F2AFA", "#FF3100", "#02B602", "#7222E7", "#C62600", "#808080", "#282828", "#029802", "#078FE4"],
                legend: $("#legend")
            });
 
            $("#legend").igChartLegend({});
        });
 
      </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.datachart_scatter.js
infragistics.datachart_shape.js
infragistics.shapechart.js
infragistics.ui.widget.js
infragistics.ui.shapechart.js

継承

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