製品版のみの機能
ドーナツ型チャート - ラベルおよびツールチップ
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
部門
予算 (内部リング) と部門サイズ (外部リング)
| InnerExtent: | |
| 予算シリーズの開始角度 | |
| 部門サイズシリーズの開始角度 | |
| 予算シリーズのラベル位置: | |
| 部署サイズ シリーズのラベル位置: | |
| ラベルの拡張 (外部の終了位置) |
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
ドーナツ型チャートにラベル、ツールチップ、および他のオプションを構成する方法を紹介します。
コード ビュー
クリップボードへコピー
<!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 id="budgetTooltipTemplate" type="text/x-ig-tmpl">
<div class="ui-chart-tooltip">
<div class='bold'>${item.Label}</div>
<div>予算: <label class='bold'>$${item.Budget}K</label></div>
</div>
</script>
</head>
<body>
<style type="text/css">
.optionTdWidth {
width: 85px;
}
.options td {
padding-bottom: 7px;
}
.title {
text-align: center;
width: 100%;
font:16px Arial, Helvetica, sans-serif;
}
.subtitle {
text-align: center;
width: 100%;
margin: 10px 0 20px 0;
font:12px Arial, Helvetica, sans-serif;
}
.bold {
font-weight: bold;
}
</style>
<div class="title">部門</div>
<div class="subtitle">予算 (内部リング) と部門サイズ (外部リング)</div>
<!-- Target element for the igDoughnutChart -->
<div id="chart"></div>
<br />
<table class="options" style="max-width: 550px; width: 100%;">
<tr>
<td>InnerExtent:</td>
<td class="optionTdWidth">
<div id="innerExtent" class="optionTdWidth"></div>
</td>
</tr>
<tr>
<td>予算シリーズの開始角度
</td>
<td class="optionTdWidth">
<div id="angleBudget" class="optionTdWidth"></div>
</td>
</tr>
<tr>
<td>部門サイズシリーズの開始角度
</td>
<td class="optionTdWidth">
<div id="angleDepartmentSize" class="optionTdWidth"></div>
</td>
</tr>
<tr>
<td>予算シリーズのラベル位置:</td>
<td class="optionTdWidth">
<select id="labelPosition" class="optionTdWidth">
<option value="center" selected="selected">中央</option>
<option value="insideEnd">内部の終了位置</option>
<option value="bestFit">最適</option>
</select>
</td>
</tr>
<tr>
<td>部署サイズ シリーズのラベル位置:</td>
<td class="optionTdWidth">
<select id="labelPosition2" class="optionTdWidth">
<option value="center">中央</option>
<option value="insideEnd">内部の終了位置</option>
<option value="outsideEnd" selected="selected">外部の終了位置</option>
<option value="bestFit">最適</option>
</select>
</td>
</tr>
<tr>
<td>ラベルの拡張 (外部の終了位置)</td>
<td class="optionTdWidth">
<div id="labelExtent" class="optionTdWidth"></div>
</td>
</tr>
</table>
<script>
$(function () {
var data = [
{ "DepartmentSize": 43, "Budget": 60, "Label": "事務" },
{ "DepartmentSize": 29, "Budget": 40, "Label": "セールス" },
{ "DepartmentSize": 50, "Budget": 60, "Label": "IT" },
{ "DepartmentSize": 22, "Budget": 40, "Label": "マーケティング" },
{ "DepartmentSize": 13, "Budget": 60, "Label": "開発" },
{ "DepartmentSize": 34, "Budget": 20, "Label": "サポート" }];
$("#chart").igDoughnutChart({
width: "100%",
height: "550px",
innerExtent: 20,
series:
[
{
name: "Budget",
labelMemberPath: "Label",
valueMemberPath: "Budget",
dataSource: data,
labelsPosition: "center",
showTooltip: true,
tooltipTemplate: "budgetTooltipTemplate"
},
{
name: "DepartmentSize",
labelMemberPath: "Label",
valueMemberPath: "DepartmentSize",
dataSource: data,
labelsPosition: "outsideEnd",
showTooltip: true,
tooltipTemplate: "<div class='ui-chart-tooltip'><div class='bold'>${item.Label}</div><div>部署サイズ: <label class='bold'>${item.DepartmentSize}</label></div></div>"
}
]
});
$("#angleBudget").slider({
slide: function (event, ui) {
$("#chart").igDoughnutChart("option", "series", [{ name: "Budget", startAngle: ui.value }]);
},
min: 0,
max: 360
});
$("#angleDepartmentSize").slider({
slide: function (event, ui) {
$("#chart").igDoughnutChart("updateSeries", { name: "DepartmentSize", startAngle: ui.value });
},
min: 0,
max: 360
});
$("#innerExtent").slider({
slide: function (event, ui) {
$("#chart").igDoughnutChart("option", "innerExtent", ui.value);
},
min: 0,
max: 80,
value: 20
});
$("#labelExtent").slider({
slide: function (event, ui) {
$("#chart").igDoughnutChart("updateSeries", { name: "DepartmentSize", labelExtent: ui.value });
},
min: 0,
max: 50,
value: 10
});
$("#explodedRadius").slider({
slide: function (event, ui) {
$("#chart").igPieChart("option", "explodedRadius", ui.value / 100);
},
min: 0,
max: 100,
value: 20
});
$("#labelPosition").change(function (e) {
var labelPosition = $(this).val();
$("#chart").igDoughnutChart("updateSeries", { name: "Budget", labelsPosition: labelPosition });
});
$("#labelPosition2").change(function (e) {
var labelPosition = $(this).val();
$("#chart").igDoughnutChart("updateSeries", { name: "DepartmentSize", labelsPosition: labelPosition });
$("#labelExtent").slider("option", "disabled", labelPosition != "outsideEnd");
});
});
</script>
</body>
</html>