製品版のみの機能
データ チャート - 極座標シリーズ
このサンプルでは、チャート コントロールでさまざまな極座標シリーズを使用する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
天気のデータ ソース:
NOAA
NOAA
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Polar 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/wind.js"></script>
<script type="text/javascript">
$(function () {
function CreateChart(selector, seriesType, title) {
$(selector).igDataChart({
width: "250px",
height: "250px",
dataSource: data,
title: title,
subtitle: "風速 vs. 風向",
axes: [{
name: "angleAxis",
type: "numericAngle",
interval: 45,
minimumValue: 0,
maximumValue: 360,
startAngleOffset: -90,
formatLabel: function (value) { return value + "º"; }
},
{
name: "radiusAxis",
type: "numericRadius",
innerRadiusExtentScale: 0.1,
minimumValue: 0,
maximumValue: 10,
interval: 5
}],
series: [{
name: "series1",
type: seriesType,
angleAxis: "angleAxis",
radiusAxis: "radiusAxis",
angleMemberPath: "WindDirection",
radiusMemberPath: "WindSpeed"
}],
horizontalZoomable: false,
verticalZoomable: false,
windowResponse: "immediate"
});
}
CreateChart("#chartPolarScatter", "polarScatter", "極座標散布図");
CreateChart("#chartPolarLine", "polarLine", "極座標折れ線チャート");
CreateChart("#chartPolarArea", "polarArea", "極座標エリア チャート");
CreateChart("#chartPolarSpline", "polarSpline", "極座標スプライン");
CreateChart("#chartPolarSplineArea", "polarSplineArea", "極座標スプライン エリア");
});
</script>
<style type="text/css">
.chart
{
display: inline-block;
}
</style>
<div>
<div class="chartContainer">
<div class="chart" id="chartPolarScatter"></div>
<div class="chart" id="chartPolarLine"></div>
<div class="chart" id="chartPolarArea"></div>
<div class="chart" id="chartPolarSpline"></div>
<div class="chart" id="chartPolarSplineArea"></div>
</div>
<div class="NOAAdata-attribution">
天気のデータ ソース:<br />
<a href="http://www.noaa.gov/" target="_blank">NOAA</a>
</div>
</div>
</body>
</html>
/*
Raw Data from NOAA.
Wind information from Los Angeles weather station.
*/
var data = [
{ "Date": 2013 - 07 - 16, "Time": "10:00", "WindSpeed": 3.305, "WindDirection": 141, id: 0 },
{ "Date": 2013 - 07 - 16, "Time": "11:00", "WindSpeed": 5.832, "WindDirection": 181, id: 1 },
{ "Date": 2013 - 07 - 16, "Time": "12:00", "WindSpeed": 5.637, "WindDirection": 179, id: 2 },
{ "Date": 2013 - 07 - 16, "Time": "13:00", "WindSpeed": 8.747, "WindDirection": 196, id: 3 },
{ "Date": 2013 - 07 - 16, "Time": "14:00", "WindSpeed": 8.553, "WindDirection": 208, id: 4 },
{ "Date": 2013 - 07 - 16, "Time": "15:00", "WindSpeed": 7.581, "WindDirection": 207, id: 5 },
{ "Date": 2013 - 07 - 16, "Time": "16:00", "WindSpeed": 7.775, "WindDirection": 211, id: 6 },
{ "Date": 2013 - 07 - 16, "Time": "17:00", "WindSpeed": 6.026, "WindDirection": 214, id: 7 },
{ "Date": 2013 - 07 - 16, "Time": "18:00", "WindSpeed": 6.803, "WindDirection": 208, id: 8 },
{ "Date": 2013 - 07 - 16, "Time": "19:00", "WindSpeed": 0.583, "WindDirection": 236, id: 9 },
{ "Date": 2013 - 07 - 16, "Time": "20:00", "WindSpeed": 6.609, "WindDirection": 307, id: 10 },
{ "Date": 2013 - 07 - 16, "Time": "21:00", "WindSpeed": 0.000, "WindDirection": 357, id: 11 }
];