ui.igPieChart

ui.igPieChart_image

igPieChart コントロールは HTML 5 jQuery チャートです。この API のクラス、オプション、イベント、メソッド、およびテーマの詳細は、上記の関連するタブの下に表示されます。

次のコード スニペットは igPieChart コントロールの初期化方法を示しています。

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

コード サンプル

<!doctype html>
<html>
<head>
    <title>Ignite UI igPieChart</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 data = [
                    { "Budget": 60, "Label": "Administration" },
                    { "Budget": 40, "Label": "Sales" },
                    { "Budget": 60, "Label": "IT" },
                    { "Budget": 40, "Label": "Marketing" },
                    { "Budget": 60, "Label": "Development" },
                    { "Budget": 20, "Label": "Support" }
                ];
 
            $("#chart").igPieChart({
                dataSource: data,
                width: "500px",
                height: "500px",
                dataValue: "Budget",
                dataLabel: "Label",
                explodedSlices: "0 1",
                radiusFactor: .8,
                legend: {
                    element: "legend",
                    type: "item"
                }
            });
        });
    </script>
</head>
<body>
    <div id="chart"></div>
    <div id="legend"></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_geometry.js
infragistics.dv_jquerydom.js
infragistics.datachart_core.js
infragistics.piechart.js
infragistics.dvcommonwidget.js
infragistics.datachart_categorycore.js
infragistics.datachart_category.js
infragistics.datachart_rangecategory.js
infragistics.datachart_verticalcategory.js
infragistics.datachart_financial.js
infragistics.datachart_extendedfinancial.js
infragistics.datachart_extendedaxes.js
infragistics.datachart_polar.js
infragistics.datachart_radial.js
infragistics.datachart_scatter.js
infragistics.datachart_stacked.js
infragistics.datachart_annotation.js
infragistics.ui.widget.js

継承

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