製品版のみの機能
データ チャート - ラジアル シリーズ
このサンプルでは、igDataChart コントロールのラジアル シリーズを紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Radial 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/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" />
<!--CSS file specific for chart styling -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/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/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>
<script type="text/javascript" src="/data-files/temperature.js"></script>
<script type="text/javascript">
$(function () {
function CreateChart(selector, seriesType, title, hasLegend) {
var thickness = 3;
var markerType = "none";
if (seriesType == "radialColumn" || seriesType == "radialPie") {
thickness = 1;
}
if (seriesType == "radialLine" || seriesType == "radialArea") {
markerType = "circle";
}
$(selector).igDataChart({
width: "250px",
height: "250px",
dataSource: data,
legend: hasLegend ? { element: "legend" } : null,
title: title,
horizontalZoomable: true,
verticalZoomable: true,
windowResponse: "immediate",
axes: [{
name: "angleAxis",
type: "categoryAngle",
label: "Time",
startAngleOffset: -90,
interval: 1
}, {
name: "radiusAxis",
type: "numericRadius",
innerRadiusExtentScale: .1,
radiusExtentScale: .8,
maximumValue: 95,
minimumValue: 75,
interval: 5,
}],
series: [{
name: "series1",
title: 'フィラデルフィア',
type: seriesType,
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "PhiladelphiaTemp",
thickness: thickness,
markerType: markerType
}, {
name: "series2",
title: 'ニューヨーク',
type: seriesType,
angleAxis: "angleAxis",
valueAxis: "radiusAxis",
valueMemberPath: "NewYorkCityTemp",
thickness: thickness,
markerType: markerType
}]
});
}
CreateChart("#chartLine", "radialLine", "ラジアル折れ線チャート", false);
CreateChart("#chartColumn", "radialColumn", "ラジアル柱状チャート", true);
CreateChart("#chartPie", "radialPie", "ラジアル円チャート", false);
CreateChart("#chartArea", "radialArea", "ラジアル エリア", false);
});
</script>
<style type="text/css">
h2
{
width: 100%;
text-align: center;
}
.chart
{
display: inline-block;
}
.legend
{
display: inline-block;
}
</style>
<div>
<h2>ニューヨーク vs. フィラデルフィア</h2>
<div class="chartContainer">
<div class="chart" id="chartLine"></div>
<div class="chart" id="chartPie"></div>
<div class="chart" id="chartArea"></div>
<div class="chart" id="chartColumn"></div>
</div>
<div class="legend" id="legend"></div>
<div>
<div>
天気のデータ ソース:<br />
<a href="http://www.noaa.gov/" target="_blank">NOAA</a>
</div>
</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 }
];