製品版のみの機能
データ チャート - チャート - シェイプ シリーズ
このサンプルでは、データ チャート コントロールのさまざまなシェイプ シリーズを紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Shape 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 id="customTooltip" type="text/x-jquery-tmpl">
<table id="tooltipTable" style="background: white;">
<tr> <th colspan="2">${item.Label}</th> </tr>
<tr> <td>Width = ${item.Width} m</td> </tr>
<tr> <td>Height = ${item.Height} m</td> </tr>
<tr> <td>Area = ${item.Area} m</td> </tr>
</table>
</script>
<script type="text/javascript">
$(function () {
var roomData = createRoomData();
$("#chartPolygon").igDataChart({
width: "320px",
height: "320px",
title: "家の間取り図",
subtitle: "Scatter Polygon",
dataSource: roomData,
isHorizontalZoomEnabled: true,
isVerticalZoomEnabled: true,
axes: [{
name: "xAxis",
type: "numericX",
interval: 1,
}, {
name: "yAxis",
type: "numericY",
interval: 1,
}],
series: [{
name: "scatterPolygon",
type: "scatterPolygon",
xAxis: "xAxis",
yAxis: "yAxis",
outline: "white",
shapeMemberPath: "Points",
tooltipTemplate: "customTooltip",
showTooltip: true,
markerTemplate: {
render: function (renderInfo) {
renderInfo.context.font = "12px serif";
renderInfo.context.fillStyle = "white";
renderInfo.context.textAlign = "center";
renderInfo.context.fillText(
renderInfo.data.item().Label,
renderInfo.xPosition,
renderInfo.yPosition);
}
},
}],
});
$("#chartPolyline").igDataChart({
width: "320px",
height: "320px",
title: "家の間取り図",
subtitle: "Scatter Polyline",
dataSource: roomData,
isHorizontalZoomEnabled: true,
isVerticalZoomEnabled: true,
axes: [{
name: "xAxis",
type: "numericX",
interval: 1,
}, {
name: "yAxis",
type: "numericY",
interval: 1,
}],
series: [{
name: "scatterPolyline",
type: "scatterPolyline",
xAxis: "xAxis",
yAxis: "yAxis",
shapeMemberPath: "Points",
tooltipTemplate: "customTooltip",
showTooltip: true,
}],
});
function createRoomData() {
var shapes = [
{
"Label": "Hallway", "Points": [[
{ x: 6, y: 0 },
{ x: 6, y: 7 },
{ x: 4, y: 7 },
{ x: 4, y: 0 }, ]]
},
{
"Label": "Entrance", "Points": [[
{ x: 0, y: 5 },
{ x: 4, y: 5 },
{ x: 4, y: 7 },
{ x: 0, y: 7 }, ]]
},
{ "Label": "Guest Bedroom", "Points": [[{ x: 2, y: 10 }, { x: 7, y: 10 }, { x: 7, y: 7 }, { x: 2, y: 7 }], ] },
{ "Label": "Bath", "Points": [[{ x: 0, y: 10 }, { x: 2, y: 10 }, { x: 2, y: 7 }, { x: 0, y: 7 }], ] },
{ "Label": "Kitchen", "Points": [[{ x: 6, y: 7 }, { x: 10, y: 7 }, { x: 10, y: 4 }, { x: 6, y: 4 }], ] },
{ "Label": "Living Room", "Points": [[{ x: 6, y: 4 }, { x: 10, y: 4 }, { x: 10, y: 0 }, { x: 6, y: 0 }], ] },
{ "Label": "Master Bedroom", "Points": [[{ x: 0, y: 0 }, { x: 4, y: 0 }, { x: 4, y: 5 }, { x: 0, y: 5 }], ] },
];
// optional code to calculate dimensions of all shapes
for (i = 0; i < shapes.length; i++) {
var xMin = 1000;
var yMin = 1000;
var xMax = 0;
var yMax = 0;
for (p = 0; p < shapes[i].Points[0].length; p++) {
var point = shapes[i].Points[0][p];
xMin = Math.min(xMin, point.x);
yMin = Math.min(yMin, point.y);
xMax = Math.max(xMax, point.x);
yMax = Math.max(yMax, point.y);
}
shapes[i].PointsCount = shapes[i].Points[0].length;
shapes[i].Width = Math.abs(xMax - xMin);
shapes[i].Height = Math.abs(yMax - yMin);
shapes[i].Area = shapes[i].Width * shapes[i].Height;
shapes[i].AreaStr = shapes[i].Area.toFixed(2);
}
return shapes;
};
});
</script>
<style type="text/css">
.chart {
display: inline-block;
}
</style>
<div>
<div class="chartContainer">
<div>
<div class="chart" id="chartPolygon"></div>
<div class="chart" id="chartPolyline"></div>
</div>
</div>
</div>
</body>
</html>