製品版のみの機能
円チャート - レイアウトの構成
このサンプルでは、円チャート コントロールのレイアウトを変更するオプションを紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
| 開始角度: | |
| 半径: | |
| 分解半径 | |
| ラベルの拡張 | |
| ラベルの位置: |
|
| 引き出し線: |
|
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/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>