ui.igCategoryChart

ui.igCategoryChart_image

igCategoryChart は軽量で高パフォーマンスなチャートです。このチャートは、簡易な API を使用してカテゴリ データを表示するために構成できます。データ (コレクションまたはコレクションのコレクション) をバインドした後、チャートは構成を実行します。

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

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

コード サンプル

<!DOCTYPE html>
<html>
<head>
    <title>Ignite UI igCategoryChart</title>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
    <script src="js/infragistics.dv.js" type="text/javascript"></script>
     
    <script type="text/javascript">
        $(function () {
            var tabularData = [
                { "Label": "1995", "Brazil": 161, "Indonesia": 197, "United States": 266, "India": 920, "China": 1297 },
                { "Label": "2005", "Brazil": 186, "Indonesia": 229, "United States": 295, "India": 1090, "China": 1216 },
                { "Label": "2015", "Brazil": 204, "Indonesia": 256, "United States": 322, "India": 1251, "China": 1361 },
                { "Label": "2025", "Brazil": 218, "Indonesia": 277, "United States": 351, "India": 1396, "China": 1394 }];
            tabularData.__dataIntents = new Array();
            tabularData.__dataIntents["Brazil"] = ["DontPlot"];
 
            $("#chart").igCategoryChart({
                dataSource: tabularData
            });
        });
    </script>
</head>
<body>
    <div id="chart"></div>
</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.datachart_core.js
infragistics.datachart_categorycore.js
infragistics.dvcommonwidget.js
infragistics.datachart_category.js
infragistics.categorychart.js
infragistics.ui.widget.js
infragistics.ui.basechart.js
infragistics.ui.categorychart.js

継承

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