製品版のみの機能
データ チャート - TypeScript の使用
このサンプルでは、データ構成のクラス ベースの方法を使用して TypeScript でデータ チャートを作成する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
人口のデータ ソース:
U.S. Census Bureau
U.S. Census Bureau
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/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/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script>
</head>
<body>
<div id="data-chart"></div>
<div class="USCensus-attribution">
人口のデータ ソース:<br>
<a href="http://www.census.gov/" target="_blank">U.S. Census Bureau</a>
</div>
<script src="/TypeScriptSamples/data-chart/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 CountryPopulation {
countryName: string;
population2005: number;
population1995: number;
constructor(inName: string, populationIn1995: number, populationIn2005: number) {
this.countryName = inName;
this.population2005 = populationIn2005;
this.population1995 = populationIn1995;
}
}
var samplePopulation: CountryPopulation[] = [];
samplePopulation.push(new CountryPopulation("中国", 1216, 1297));
samplePopulation.push(new CountryPopulation("インド", 920, 1090));
samplePopulation.push(new CountryPopulation("米国", 266, 295));
samplePopulation.push(new CountryPopulation("インドネシア", 197, 229));
samplePopulation.push(new CountryPopulation("ブラジル", 161, 186));
$(function () {
$("#data-chart").igDataChart({
width: "80%",
height: "400px",
title: "国別人口",
subtitle: "1995 年および 2005 年推計人口トップ 5",
dataSource: samplePopulation,
axes: [
{
name: "NameAxis",
type: "categoryX",
title: "国",
label: "countryName"
},
{
name: "PopulationAxis",
type: "numericY",
minimumValue: 0,
title: "人口 (百万人単位)",
}
],
series: [
{
name: "1995Population",
title: "1995",
type: "column",
isDropShadowEnabled: true,
useSingleShadow: false,
shadowColor: "#666666",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "NameAxis",
yAxis: "PopulationAxis",
valueMemberPath: "population1995",
showTooltip: true
},
{
name: "2005Population",
title: "2005",
type: "column",
isDropShadowEnabled: true,
useSingleShadow: false,
shadowColor: "#666666",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "NameAxis",
yAxis: "PopulationAxis",
valueMemberPath: "population2005",
showTooltip: true
},
{
name: "categorySeries",
type: "categoryToolTipLayer",
useInterpolation: false,
transitionDuration: 150
},
{
name: "crosshairLayer",
title: "crosshair",
type: "crosshairLayer",
useInterpolation: false,
transitionDuration: 500
}
]
});
})