製品版のみの機能
マップ - 比例シンボル シリーズ
このサンプルは、マップを作成し、世界で発生した地震のマグニチュードを地理比例シンボル シリーズで表示する方法を示します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
マップはデータ駆動型の記号サイズを持つ散布シリーズを使用します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- 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" />
<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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
<script id="geoSymbolTooltip" type="text/x-jquery-tmpl">
<table id="tooltipTable" >
<tr><th colspan="2">${item.City}, ${item.Country}</th></tr>
<tr>
<td>Population:</td>
<td>${item.Population}</td>
</tr>
</table>
</script>
</head>
<body>
<script type="text/javascript">
$(function () {
function CreateEarthquakes(count) {
count = count || 50;
var data = [];
for (i = 0; i < count; i++)
{
var x = Math.floor((Math.random() * 360) - 180);
var y = Math.floor((Math.random() * 180) - 90);
var m = Math.floor((Math.random() * 10) + 1);
var point = { "Magnitude": m, "Longitude": x, "Latitude": y };
data.push(point);
}
return data;
}
var data = CreateEarthquakes(100);
function createMap() {
$("#map").igMap({
width: "700px",
height: "500px",
series: [{
name: "series1",
type: "geographicProportionalSymbol",
dataSource: data,
markerType: "circle",
markerOutline: "black",
longitudeMemberPath: "Longitude",
latitudeMemberPath: "Latitude",
radiusMemberPath: "Magnitude",
radiusScale: {
minimumValue: 10,
maximumValue: 40,
},
fillMemberPath: "Magnitude",
fillScale: {
type: "value",
brushes: ["red", "yellow"],
minimumValue: 1,
maximumValue: 12,
}
},
]
});
};
createMap();
});
</script>
<div>
<div id="map"></div>
</div>
</body>
</html>