製品版のみの機能
ドーナツ型チャート - 凡例の構成
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
人口が多い国トップ 5
1990 年 (内部リング) vs. 2008 年 (外部リング)*
*人口は 100 万単位です
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルは、ドーナツ型チャートの凡例を構成する方法を紹介します。
コード ビュー
クリップボードへコピー
<!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>
</head>
<body>
<div style="float: left; width: 70%;">
<div style="text-align: center; width: 100%; font: 16px Arial, Helvetica, sans-serif;">人口が多い国トップ 5</div>
<div style="text-align: center; width: 100%; margin: 10px 0; font: 12px Arial, Helvetica, sans-serif;">1990 年 (内部リング) vs. 2008 年 (外部リング)*</div>
<!-- Target element for the igDoughnutChart -->
<div id="chart"></div>
<div style="margin: 10px 0; font: 12px Arial, Helvetica, sans-serif;">*人口は 100 万単位です</div>
</div>
<div id="legend" style="float: left"></div>
<script>
$(function () {
var data = [
{ "CountryName": "中国", "Pop1990": 1141, "Pop2008": 1333, "Pop2025": 1458 },
{ "CountryName": "インド", "Pop1990": 849, "Pop2008": 1140, "Pop2025": 1398 },
{ "CountryName": "米国", "Pop1990": 250, "Pop2008": 304, "Pop2025": 352 },
{ "CountryName": "インドネシア", "Pop1990": 178, "Pop2008": 228, "Pop2025": 273 },
{ "CountryName": "ブラジル", "Pop1990": 150, "Pop2008": 192, "Pop2025": 223 }
];
$("#chart").igDoughnutChart({
width: "100%",
height: "550px",
innerExtent: 20,
series:
[
{
name: "Pop1990",
labelMemberPath: "Pop1990",
valueMemberPath: "Pop1990",
dataSource: data,
formatLabel: function (context) {
return "(" + context.itemLabel + ")";
}
},
{
name: "Pop2008",
labelMemberPath: "CountryName",
valueMemberPath: "Pop2008",
dataSource: data,
legend: { element: "legend" },
formatLabel: function (context) {
return context.itemLabel + " (" + context.item.Pop2008 + ")";
}
}
],
// the legend items get refreshed every time the doughnut is re-rendered
// use this event to update the legend items labels
holeDimensionsChanged: function () {
updateLegendItems();
}
});
// the legend items have the value associated with the specific series in parentheses ()
// remove this text making the legend applicable for both series
function updateLegendItems() {
$(".ui-chart-legend-item-text > span").each(function () {
var txt = $(this).text(),
idx = txt.lastIndexOf("(");
if (idx != -1) {
$(this).text(txt.substr(0, idx));
} else {
return false;
}
});
}
updateLegendItems();
});
</script>
</body>
</html>