製品版のみの機能
データ チャート - カテゴリ シリーズ
このサンプルでは、チャート コントロールのさまざまなカテゴリ シリーズを紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
人口のデータ ソース:
Quandl
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Charts - Category Series</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 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" />
<!-- 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>
<script type="text/javascript">
$(function () {
var data = [
{ "Year": "1995", "China": 1297, "India": 920, "United States": 266 },
{ "Year": "2005", "China": 1216, "India": 1090, "United States": 295 },
{ "Year": "2010", "China": 1271, "India": 1131, "United States": 314 },
{ "Year": "2015", "China": 1361, "India": 1251, "United States": 322 },
{ "Year": "2020", "China": 1381, "India": 1341, "United States": 342 },
{ "Year": "2025", "China": 1394, "India": 1466, "United States": 361 }
];
CreateChart("#columnChart", "column", "柱状チャート");
CreateChart("#pointChart", "point", "ポイント");
CreateChart("#lineChart", "line", "折れ線チャート");
CreateChart("#splineChart", "spline", "スプライン チャート");
CreateChart("#areaChart", "area", "エリア チャート");
CreateChart("#splineAreaChart", "splineArea", "スプライン エリア チャート");
CreateChart("#stepLineChart", "stepLine", "ステップ折れ線チャート");
CreateChart("#stepAreaChart", "stepArea", "ステップ エリア チャート");
CreateChart("#waterfallChart", "waterfall", "ウォーターフォール");
function CreateChart(chartID, seriesType, chartTitle) {
$(chartID).igDataChart({
width: "250px",
height: "250px",
title: chartTitle,
horizontalZoomable: true,
verticalZoomable: true,
dataSource: data,
axes: [
{
name: "xAxis", type: "categoryX", label: "Year",
labelTextStyle: "8pt Verdana",
},
{
name: "yAxis", type: "numericY", minimumValue: 0,
title: "人口 (百万人単位)",
labelTextStyle: "8pt Verdana",
}
],
series: [
CreateSeries(seriesType, "China"),
CreateSeries(seriesType, "India"),
CreateSeries(seriesType, "United States"),
]
});
}
function CreateSeries(seriesType, seriesMemberPath) {
var thickness = 3;
var markerType = "none";
if (seriesType == "column" || seriesType == "waterfall")
{
thickness = 1;
}
if (seriesType == "point") {
markerType = "circle";
}
var series = {
type: seriesType,
markerType: markerType,
xAxis: "xAxis",
yAxis: "yAxis",
name: seriesMemberPath + "series",
title: seriesMemberPath,
valueMemberPath: seriesMemberPath,
isTransitionInEnabled: true,
isHighlightingEnabled: true,
showTooltip: true,
thickness: thickness
}
return series;
}
});
</script>
<style>
.chart {
display: inline-block;
}
</style>
<div>
<div id="pointChart" class="chart"></div>
<div id="lineChart" class="chart"></div>
<div id="splineChart" class="chart"></div>
<div id="columnChart" class="chart"></div>
<div id="areaChart" class="chart"></div>
<div id="splineAreaChart" class="chart"></div>
<div id="waterfallChart" class="chart"></div>
<div id="stepLineChart" class="chart"></div>
<div id="stepAreaChart" class="chart"></div>
<div class="Quandl-attribution">
人口のデータ ソース:
<a href="http://www.quandl.com/" target="_blank">Quandl</a>
</div>
</div>
</body>
</html>