OSS で利用できる機能
Infragistics Loader - 複数リソースの読み込み
このサンプルでは、Infragistics ローダーを使用して複数のコンポーネントと機能の読み込みを紹介します。JavaScript でローダーを初期化する際に、チェーンでリソースを読み込むことができます。たとえば、「Category」と「Radial」を入れ子にする機能の場合、igDataChart.Category.Radial を使用します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#chart1 {
position: relative;
float: left;
margin-right: 10px;
}
#legend1 {
position: relative;
float: left;
}
.selectionOptions {
margin-bottom: 10px;
}
</style>
<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 Loader JavaScript File -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.loader.js" type="text/javascript"></script>
</head>
<body>
<div class="selectionOptions">
<select id="seriesType">
<option value="radialLine" selected="selected">ラジアル折れ線チャート</option>
<option value="radialColumn">ラジアル柱状チャート</option>
<option value="radialPie">ラジアル円チャート</option>
</select>
</div>
<div id="chart1"></div>
<div id="legend1"></div>
<script>
$.ig.loader({
scriptPath: "http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/",
cssPath: "http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/",
resources: "igDataChart.Radial,igChartLegend,igCombo",
ready: function () {
var data1 = [{ "Label": "管理", "Budget": 60, "Spending": 20 },
{ "Label": "セールス", "Budget": 40, "Spending": 80 },
{ "Label": "IT", "Budget": 60, "Spending": 20 },
{ "Label": "マーケティング", "Budget": 40, "Spending": 80 },
{ "Label": "開発", "Budget": 60, "Spending": 20 },
{ "Label": "サポート", "Budget": 20, "Spending": 60 }];
$("#chart1").igDataChart({
width: "500px",
height: "500px",
dataSource: data1,
legend: { element: "legend1" },
axes: [{
name: "angleAxis",
type: "categoryAngle",
label: "Label",
interval: 1
}, {
name: "radiusAxis",
type: "numericRadius",
innerRadiusExtentScale: .1,
maximumValue: 100,
minimumValue: 0,
interval: 25,
radiusExtentScale: .6
}],
series: [{
name: "series1",
title: '予算',
type: "radialLine",
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "Budget",
thickness: 5,
markerType: "circle"
}, {
name: "series2",
title: '支出',
type: "radialLine",
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "Spending",
thickness: 5,
markerType: "circle"
}],
horizontalZoomable: true,
verticalZoomable: true,
windowResponse: "immediate"
});
$("#seriesType").igCombo({
selectionChanged: function (evt, ui) {
if (ui.items[0].data.value != undefined) {
$("#chart1").igDataChart("option", "series", [{
name: "series1", remove: true
}, {
name: "series2", remove: true
}, {
name: "series1",
title: '予算',
type: ui.items[0].data.value,
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "Budget",
thickness: 5,
markerType: "circle"
}, {
name: "series2",
title: '支出',
type: ui.items[0].data.value,
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "Spending",
thickness: 5,
markerType: "circle"
}]);
}
}
});
}
});
</script>
</body>
</html>