OSS で利用できる機能
Infragistics Loader - TypeScript との連携
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、TypeScript で Infragistics ローダーを使用して複数のコンポーネントと機能の読み込みを紹介します。表示されるデータ チャートの型がコンボ ボックスから選択されます。
データ チャートの凡例も含まれています。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<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.loader.js"></script>
<style type="text/css">
#chart {
position: relative;
float: left;
margin-right: 10px;
}
#legend {
position: relative;
float: left;
}
.selectionOptions {
margin-bottom: 10px;
}
</style>
</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="chart"></div>
<div id="legend"></div>
<script src="/TypeScriptSamples/loader/typescript.js"></script>
</body>
</html>
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
class DepartmentData {
label: string;
budget: number;
spending: number;
constructor(_label: string, _budget: number, _spending: number) {
this.label = _label;
this.budget = _budget;
this.spending = _spending;
}
}
var companyData: DepartmentData[] = [];
companyData.push(new DepartmentData("Administration", 75, 35));
companyData.push(new DepartmentData("Sales", 30, 80));
companyData.push(new DepartmentData("IT", 60, 20));
companyData.push(new DepartmentData("Marketing", 50, 70));
companyData.push(new DepartmentData("Development", 80, 40));
companyData.push(new DepartmentData("Support", 20, 45));
$.ig.loader({
scriptPath: "/igniteui/js/",
cssPath: "/igniteui/css/",
resources: "igDataChart.Radial,igCombo, igChartLegend"
});
// jQuery's ready event can be used with the loader.
// The loader calls holdReady until all JS and CSS files are loaded.
$(function () {
$("#chart").igDataChart({
width: "500px",
height: "500px",
dataSource: companyData,
legend: { element: "legend" },
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: 'Budget',
type: "radialLine",
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "budget",
thickness: 5,
markerType: "circle"
}, {
name: "series2",
title: 'Spending',
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) {
$("#chart").igDataChart("option", "series", [{
name: "series1", remove: true
}, {
name: "series2", remove: true
}, {
name: "series1",
title: "Budget",
type: ui.items[0].data.value,
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "budget",
thickness: 5,
markerType: "circle"
}, {
name: "series2",
title: 'Spending',
type: ui.items[0].data.value,
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "spending",
thickness: 5,
markerType: "circle"
}]);
}
}
});
});