製品版のみの機能
データ チャート - 範囲カテゴリー シリーズ
このサンプルでは、データ チャート コントロールのさまざまな範囲カテゴリ シリーズを紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
天気のデータ ソース:
NOAA
NOAA
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Range 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" />
<!--CSS file specific for chart styling -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.chart.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" src="/data-files/temperature.js"></script>
<script id="tooltipTemplate" type="text/x-jquery-tmpl">
<div>
<span id="tooltipValue">フィラデルフィア: ${item.PhiladelphiaTemp}</span><br />
<span id="Span1">ニューヨーク: ${item.NewYorkCityTemp}</span>
</div>
</script>
<script type="text/javascript">
$(function () {
function CreateChart(selector, seriesType, title) {
$(selector).igDataChart({
width: "250px",
height: "250px",
dataSource: data,
title: title,
subtitle: "ニューヨーク vs. フィラデルフィア",
horizontalZoomable: true,
verticalZoomable: true,
windowResponse: "immediate",
axes: [{
name: "xAxis",
type: "categoryX",
label: "Time"
},
{
name: "yAxis",
type: "numericY",
title: "温度 (華氏)",
}],
series: [{
type: seriesType,
name: "series1",
xAxis: "xAxis",
yAxis: "yAxis",
lowMemberPath: "NewYorkCityTemp",
highMemberPath: "PhiladelphiaTemp",
tooltipTemplate: "tooltipTemplate",
showTooltip: true,
isHighlightingEnabled: true,
isTransitionInEnabled: true
}]
});
}
CreateChart("#chartArea", "rangeArea", "範囲エリア チャート");
CreateChart("#chartColumn", "rangeColumn", "範囲柱状チャート");
});
</script>
<style type="text/css">
.chart
{
display: inline-block;
}
</style>
<div class="chartContainer">
<div>
<div class="chart" id="chartArea"></div>
<div class="chart" id="chartColumn"></div>
</div>
<div class="NOAAdata-attribution">
天気のデータ ソース:<br />
<a href="http://www.noaa.gov/" target="_blank">NOAA</a>
</div>
</div>
</body>
</html>
var data = [
//{ "Date": 20130716, "Time": "0:00", "NewYorkCityTemp": 85.64, "PhiladelphiaTemp": 87.08 },
{ "Date": 2013-07-16, "Time": "1:00", "NewYorkCityTemp": 85.46, "PhiladelphiaTemp": 86.72 },
//{ "Date": 2013-07-16, "Time": "2:00", "NewYorkCityTemp": 84.2, "PhiladelphiaTemp": 85.64 },
{ "Date": 2013-07-16, "Time": "3:00", "NewYorkCityTemp": 82.76, "PhiladelphiaTemp": 84.74 },
//{ "Date": 2013-07-16, "Time": "4:00", "NewYorkCityTemp": 81.5, "PhiladelphiaTemp": 83.48 },
{ "Date": 2013-07-16, "Time": "5:00", "NewYorkCityTemp": 80.6, "PhiladelphiaTemp": 82.94 },
//{ "Date": 2013-07-16, "Time": "6:00", "NewYorkCityTemp": 79.52, "PhiladelphiaTemp": 82.04 },
{ "Date": 2013-07-16, "Time": "7:00", "NewYorkCityTemp": 79.34, "PhiladelphiaTemp": 82.22 },
//{ "Date": 2013-07-16, "Time": "8:00", "NewYorkCityTemp": 80.96, "PhiladelphiaTemp": 83.66 },
{ "Date": 2013-07-16, "Time": "9:00", "NewYorkCityTemp": 82.76, "PhiladelphiaTemp": 86 },
//{ "Date": 2013-07-16, "Time": "10:00", "NewYorkCityTemp": 84.74, "PhiladelphiaTemp": 87.8 },
{ "Date": 2013-07-16, "Time": "11:00", "NewYorkCityTemp": 86.54, "PhiladelphiaTemp": 88.88 },
//{ "Date": 2013-07-16, "Time": "12:00", "NewYorkCityTemp": 88.16, "PhiladelphiaTemp": 90.68 },
{ "Date": 2013-07-16, "Time": "13:00", "NewYorkCityTemp": 89.78, "PhiladelphiaTemp": 93.38 },
//{ "Date": 2013-07-16, "Time": "14:00", "NewYorkCityTemp": 90.86, "PhiladelphiaTemp": 93.02 },
{ "Date": 2013-07-16, "Time": "15:00", "NewYorkCityTemp": 92.48, "PhiladelphiaTemp": 93.2 },
//{ "Date": 2013-07-16, "Time": "16:00", "NewYorkCityTemp": 91.58, "PhiladelphiaTemp": 93.56 },
{ "Date": 2013-07-16, "Time": "17:00", "NewYorkCityTemp": 93.2, "PhiladelphiaTemp": 92.3 },
//{ "Date": 2013-07-16, "Time": "18:00", "NewYorkCityTemp": 92.84, "PhiladelphiaTemp": 92.12 },
{ "Date": 2013-07-16, "Time": "19:00", "NewYorkCityTemp": 91.4, "PhiladelphiaTemp": 92.48 },
//{ "Date": 2013-07-16, "Time": "20:00", "NewYorkCityTemp": 89.78, "PhiladelphiaTemp": 90.86 },
{ "Date": 2013-07-16, "Time": "21:00", "NewYorkCityTemp": 88.52, "PhiladelphiaTemp": 89.78 },
//{ "Date": 2013-07-16, "Time": "22:00", "NewYorkCityTemp": 87.26, "PhiladelphiaTemp": 88.34 },
{ "Date": 2013-07-16, "Time": "23:00", "NewYorkCityTemp": 88.16, "PhiladelphiaTemp": 86.72 },
//{ "Date": 2013-07-17, "Time": "0:00", "NewYorkCityTemp": 87.08, "PhiladelphiaTemp": 83.12 },
//{ "Date": 2013-07-17, "Time": "1:00", "NewYorkCityTemp": 86.72, "PhiladelphiaTemp": 81.68 },
//{ "Date": 2013-07-17, "Time": "2:00", "NewYorkCityTemp": 86, "PhiladelphiaTemp": 80.6 },
//{ "Date": 2013-07-17, "Time": "3:00", "NewYorkCityTemp": 84.2, "PhiladelphiaTemp": 79.7 },
//{ "Date": 2013-07-17, "Time": "4:00", "NewYorkCityTemp": 83.3, "PhiladelphiaTemp": 79.16 },
//{ "Date": 2013-07-17, "Time": "5:00", "NewYorkCityTemp": 83.3, "PhiladelphiaTemp": 80.06 },
//{ "Date": 2013-07-17, "Time": "6:00", "NewYorkCityTemp": 82.58, "PhiladelphiaTemp": 80.42 },
//{ "Date": 2013-07-17, "Time": "7:00", "NewYorkCityTemp": 83.12, "PhiladelphiaTemp": 82.76 },
//{ "Date": 2013-07-17, "Time": "8:00", "NewYorkCityTemp": 84.2, "PhiladelphiaTemp": 86.9 },
//{ "Date": 2013-07-17, "Time": "9:00", "NewYorkCityTemp": 85.64, "PhiladelphiaTemp": 88.88 },
//{ "Date": 2013-07-17, "Time": "10:00", "NewYorkCityTemp": 86.18, "PhiladelphiaTemp": 90.32 },
//{ "Date": 2013-07-17, "Time": "11:00", "NewYorkCityTemp": 87.62, "PhiladelphiaTemp": 91.94 },
//{ "Date": 2013-07-17, "Time": "12:00", "NewYorkCityTemp": 89.6, "PhiladelphiaTemp": 93.2 },
//{ "Date": 2013-07-17, "Time": "13:00", "NewYorkCityTemp": 90.14, "PhiladelphiaTemp": 94.1 },
//{ "Date": 2013-07-17, "Time": "14:00", "NewYorkCityTemp": 85.46, "PhiladelphiaTemp": 93.56 },
//{ "Date": 2013-07-17, "Time": "15:00", "NewYorkCityTemp": 84.56, "PhiladelphiaTemp": 93.56 },
//{ "Date": 2013-07-17, "Time": "16:00", "NewYorkCityTemp": 88.16, "PhiladelphiaTemp": 94.28 }
];