製品版のみの機能

円チャート - 概要

igPieChart は、HTML5 による Web アプリケーションで円グラフを描画するチャート作成用コントロールです。これはウェブページに円グラフをプロットする際に新しい HTML5 canvas タグを使用します。 igPieChart の主な機能には、凡例、テンプレートに従ったツールチップ、円の大きさのコントロール、ラベル位置のコントロール、開始角度、拡がりの方向、飛び出たスライスとその中心からの位置といったものがあります。サンプルをすべて表示するには、メニューを参照してください。

開始角度:
半径:
分解半径
ラベルの拡張
ラベルの位置:
引き出し線:

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイルデバイスで画面を回転、フルサイズ表示、またはその他のデバイスにメールで送信します。

コードビュー

JsFiddle で表示

クリップボードへコピー

                    data = [{ "Budget": 60, "Label": "事務" }, { "Budget": 40, "Label": "セールス" },
    { "Budget": 60, "Label": "IT" }, { "Budget": 40, "Label": "マーケティング" },
    { "Budget": 60, "Label": "開発" }, { "Budget": 20, "Label": "サポート" }];

$('#chart').igPieChart({
    dataSource: data,
    width: '430px',
    height: '430px',
    valueMemberPath: 'Budget',
    labelMemberPath: 'Label',
    explodedSlices: [2, 3],
    radiusFactor: .6,
    labelsPosition: "outsideEnd",
    leaderLineType: "arc",
    labelExtent: 40,
    legend: { element: 'legend', type: "item" }
});

$("#angle").slider({
    slide: function (event, ui) {
        $("#chart").igPieChart("option", "startAngle", ui.value);
    },
    min: 0,
    max: 360
});

$("#radius").slider({
    slide: function (event, ui) {
        $("#chart").igPieChart("option", "radiusFactor", ui.value / 1000.0);
    },
    min: 0,
    max: 1000,
    value: 600
});

$("#labelExtent").slider({
    slide: function (event, ui) {
        $("#chart").igPieChart("option", "labelExtent", ui.value);
    },
    min: 0,
    max: 50,
    value: 40
});

$("#explodedRadius").slider({
    slide: function (event, ui) {
        $("#chart").igPieChart("option", "explodedRadius", ui.value / 100);
    },
    min: 0,
    max: 100,
    value: 20
});

$("#labelPosition").igCombo({
    enableClearButton: false,
    mode: "dropdown",
    selectionChanged: function (evt, ui) {
        if ($.isArray(ui.items) && ui.items[0] != undefined) {
            $("#chart").igPieChart("option", "labelsPosition", ui.items[0].data.value);

            $("#labelExtent").slider("option", "disabled", ui.items[0].data.value != "outsideEnd");
            $("#leaderLine").igCombo("option", "disabled", ui.items[0].data.value != "outsideEnd" ? true : false);
        }
    }
});

$("#leaderLine").igCombo({
    enableClearButton: false,
    mode: "dropdown",
    selectionChanged: function (evt, ui) {
        if ($.isArray(ui.items) && ui.items[0] != undefined) {
            $("#chart").igPieChart("option", "leaderLineType", ui.items[0].data.value);
        }
    }
});

                    <!-- Widget target elements -->    
    <div id="chart"></div>
    <div id="legend"></div>

    <table class="options">
        <tr>
            <td>開始角度:</td>
            <td>
                <div id="angle" class="slider"></div>
            </td>
        </tr>
        <tr>
            <td>半径:</td>
            <td>
                <div id="radius" class="slider"></div>
            </td>
        </tr>
        <tr>
            <td>分解半径</td>
            <td>
                <div id="explodedRadius" class="slider"></div>
            </td>
        </tr>
        <tr>
            <td>ラベルの拡張</td>
            <td>
                <div id="labelExtent" class="slider"></div>
            </td>
        </tr>
        <tr>
            <td>ラベルの位置:</td>
            <td>
                <div class="comboContainer">
                    <select id="labelPosition">
                        <option value="none">なし</option>
                        <option value="center">中央</option>
                        <option value="insideEnd">内部の終了位置</option>
                        <option value="outsideEnd" selected="selected">外部の終了位置</option>
                        <option value="bestFit">最適</option>
                    </select>
                </div>
            </td>
        </tr>
        <tr>
            <td>引き出し線:</td>
            <td>
                <div class="comboContainer">
                    <select id="leaderLine">
                        <option value="straight">直線</option>
                        <option value="arc" selected="selected">円弧</option>
                        <option value="spline">スプライン</option>
                    </select>
                </div>
            </td>
        </tr>
    </table>

                    #chart {
    display:inline-block;
    position: relative;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}
#legend {
    display:inline-block;
}

.options {
    margin-top: 20px;
}

.slider {
    width: 200px;
    height: 10px;
    margin: 10px;
}

                    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>

</head>
<body>

    <style type="text/css">
        #chart {
            display:inline-block;
            position: relative;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        #legend {
            display:inline-block;
        }

        .options {
            margin-top: 20px;
        }

        .slider {
            width: 200px;
            height: 10px;
            margin: 10px;
        }
    </style>

    <!-- Widget target elements -->    
    <div id="chart"></div>
    <div id="legend"></div>

    <table class="options">
        <tr>
            <td>開始角度:</td>
            <td>
                <div id="angle" class="slider"></div>
            </td>
        </tr>
        <tr>
            <td>半径:</td>
            <td>
                <div id="radius" class="slider"></div>
            </td>
        </tr>
        <tr>
            <td>分解半径</td>
            <td>
                <div id="explodedRadius" class="slider"></div>
            </td>
        </tr>
        <tr>
            <td>ラベルの拡張</td>
            <td>
                <div id="labelExtent" class="slider"></div>
            </td>
        </tr>
        <tr>
            <td>ラベルの位置:</td>
            <td>
                <div class="comboContainer">
                    <select id="labelPosition">
                        <option value="none">なし</option>
                        <option value="center">中央</option>
                        <option value="insideEnd">内部の終了位置</option>
                        <option value="outsideEnd" selected="selected">外部の終了位置</option>
                        <option value="bestFit">最適</option>
                    </select>
                </div>
            </td>
        </tr>
        <tr>
            <td>引き出し線:</td>
            <td>
                <div class="comboContainer">
                    <select id="leaderLine">
                        <option value="straight">直線</option>
                        <option value="arc" selected="selected">円弧</option>
                        <option value="spline">スプライン</option>
                    </select>
                </div>
            </td>
        </tr>
    </table>

    <script>

        $(function () {

            data = [{ "Budget": 60, "Label": "事務" }, { "Budget": 40, "Label": "セールス" },
                { "Budget": 60, "Label": "IT" }, { "Budget": 40, "Label": "マーケティング" },
                { "Budget": 60, "Label": "開発" }, { "Budget": 20, "Label": "サポート" }];

            $('#chart').igPieChart({
                dataSource: data,
                width: '430px',
                height: '430px',
                valueMemberPath: 'Budget',
                labelMemberPath: 'Label',
                explodedSlices: [2, 3],
                radiusFactor: .6,
                labelsPosition: "outsideEnd",
                leaderLineType: "arc",
                labelExtent: 40,
                legend: { element: 'legend', type: "item" }
            });

            $("#angle").slider({
                slide: function (event, ui) {
                    $("#chart").igPieChart("option", "startAngle", ui.value);
                },
                min: 0,
                max: 360
            });

            $("#radius").slider({
                slide: function (event, ui) {
                    $("#chart").igPieChart("option", "radiusFactor", ui.value / 1000.0);
                },
                min: 0,
                max: 1000,
                value: 600
            });

            $("#labelExtent").slider({
                slide: function (event, ui) {
                    $("#chart").igPieChart("option", "labelExtent", ui.value);
                },
                min: 0,
                max: 50,
                value: 40
            });
            
            $("#explodedRadius").slider({
                slide: function (event, ui) {
                    $("#chart").igPieChart("option", "explodedRadius", ui.value / 100);
                },
                min: 0,
                max: 100,
                value: 20
            });

            $("#labelPosition").igCombo({
                enableClearButton: false,
                mode: "dropdown",
                selectionChanged: function (evt, ui) {
                    if ($.isArray(ui.items) && ui.items[0] != undefined) {
                        $("#chart").igPieChart("option", "labelsPosition", ui.items[0].data.value);

                        $("#labelExtent").slider("option", "disabled", ui.items[0].data.value != "outsideEnd");
                        $("#leaderLine").igCombo("option", "disabled", ui.items[0].data.value != "outsideEnd" ? true : false);
                    }
                }
            });
            
            $("#leaderLine").igCombo({
                enableClearButton: false,
                mode: "dropdown",
                selectionChanged: function (evt, ui) {
                    if ($.isArray(ui.items) && ui.items[0] != undefined) {
                        $("#chart").igPieChart("option", "leaderLineType", ui.items[0].data.value);
                    }
                }
            });

        });

    </script>

</body>
</html>

Ignite UI for jQuery | サンプル

検索結果

円チャート - 概要

コードビュー

Ignite UI for jQuery | サンプル

検索結果

円チャート - 概要

コード ビュー

コードビュー