製品版のみの機能
シェープ チャート - 軸ラベルの構成
このサンプルで igShapeChart で軸ラベルを構成する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
X 軸オプション
Y 軸オプション
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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" />
<!-- 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>
<title>ShapeChart Axis Labels</title>
</head>
<body>
<script>
$(function () {
$("#shapeChart").igShapeChart({
databaseSource: 'https://www.igniteui.com/data-files/shapes/world_countries_reg.dbf',
shapeDataSource: 'https://www.igniteui.com/data-files/shapes/world_countries_reg.shp',
chartType: "polygon",
width: "600px",
height: "400px",
xAxisLabelVisibility: "visible",
yAxisLabelVisibility: "visible",
xAxisLabelAngle: 0,
yAxisLabelAngle: 0,
xAxisLabelTextColor: "gray",
yAxisLabelTextColor: "gray",
xAxisLabelTextStyle: "10pt Verdana",
yAxisLabelTextStyle: "10pt Verdana",
xAxisLabelLocation: "outsideBottom",
yAxisLabelLocation: "outsideRight",
xAxisLabelVerticalAlignment: "top",
yAxisLabelHorizontalAlignment: "left",
xAxisMinimumValue: -180,
xAxisMaximumValue: 180,
yAxisMinimumValue: -90,
yAxisMaximumValue: 90,
xAxisInterval: 30,
yAxisInterval: 30,
isHorizontalZoomEnabled: true,
isVerticalZoomEnabled: true,
});
$("#xAxisLabelAngleSlider").slider(
{
min: -180, max: 180, value: 0,
slide: function (e, ui) {
$("#shapeChart").igShapeChart("option", "xAxisLabelAngle", ui.value);
$("#xAxisLabelAngleValue").text(ui.value);
}
});
$("#xAxisLabelFontSizeSlider").slider(
{
min: 5, max: 15, value: 10,
slide: function (e, ui) {
var size = ui.value + "pt";
var style = size + " " + "Verdona";
$("#shapeChart").igShapeChart("option", "xAxisLabelTextStyle", style);
$("#xAxisLabelFontSizeValue").text(ui.value);
}
});
$("#xAxisLabelMarginSlider").slider(
{
min: 0, max: 25, value: 5,
slide: function (e, ui) {
$("#shapeChart").igShapeChart("option", "xAxisLabelTopMargin", ui.value);
$("#shapeChart").igShapeChart("option", "xAxisLabelBottomMargin", ui.value);
$("#xAxisLabelMarginValue").text(ui.value);
}
});
$("#yAxisLabelAngleSlider").slider(
{
min: -180, max: 180, value: 0,
slide: function (e, ui) {
$("#shapeChart").igShapeChart("option", "yAxisLabelAngle", ui.value);
$("#yAxisLabelAngleValue").text(ui.value);
}
});
$("#yAxisLabelFontSizeSlider").slider(
{
min: 5, max: 15, value: 10,
slide: function (e, ui) {
var size = ui.value + "pt";
var style = size + " " + "Verdona";
$("#shapeChart").igShapeChart("option", "yAxisLabelTextStyle", style);
$("#yAxisLabelFontSizeValue").text(ui.value);
}
});
$("#yAxisLabelMarginSlider").slider(
{
min: 0, max: 25, value: 5,
slide: function (e, ui) {
$("#shapeChart").igShapeChart("option", "yAxisLabelRightMargin", ui.value);
$("#shapeChart").igShapeChart("option", "yAxisLabelLeftMargin", ui.value);
$("#yAxisLabelMarginValue").text(ui.value);
}
});
});
</script>
<style>
.chart {
position: relative;
float: left;
margin-right: 10px;
}
.optionsPane {
position: relative;
float: initial;
width: 275px;
margin: 6px 3px 6px 6px;
display: inline-block;
padding-top: 18px;
}
.optionsColumn {
float: left;
position: relative;
margin: 2px;
padding: 2px;
display: inline-block;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #e0e0e0;
}
.slider {
width: 245px;
margin: 8px 8px 8px 8px;
padding-right: 3px;
padding-left: 3px;
display: inline-block;
float: left;
}
.selector {
width: 245px;
margin: 8px 8px 8px 8px;
padding-right: 3px;
padding-left: 3px;
display: inline-block;
float: left;
}
.labels {
padding-right: 7px;
}
.values {
padding-left: 7px;
padding-right: 0px;
width: 30px;
}
</style>
<div id="shapeChart" class="chart"></div>
<div >
<div class="optionsPane">
<div><b>X 軸オプション</b></div>
<div class="optionsColumn">
<div>
<label>軸ラベルの角度</label>
<label id="xAxisLabelAngleValue" class="values">0</label>
<div id="xAxisLabelAngleSlider" class="slider"></div>
</div>
<div>
<label>軸ラベル フォント サイズ</label>
<label id="xAxisLabelFontSizeValue" class="values">12</label>
<div id="xAxisLabelFontSizeSlider" class="slider"></div>
</div>
<div>
<label>軸ラベルのマージン:</label>
<label id="xAxisLabelMarginValue" class="values">2</label>
<div id="xAxisLabelMarginSlider" class="slider"></div>
</div>
</div>
</div>
<div class="optionsPane">
<div><b>Y 軸オプション</b></div>
<div class="optionsColumn">
<div>
<label>軸ラベルの角度</label>
<label id="yAxisLabelAngleValue" class="values">0</label>
<div id="yAxisLabelAngleSlider" class="slider"></div>
</div>
<div>
<label>軸ラベル フォント サイズ</label>
<label id="yAxisLabelFontSizeValue" class="values">12</label>
<div id="yAxisLabelFontSizeSlider" class="slider"></div>
</div>
<div>
<label>軸ラベルのマージン:</label>
<label id="yAxisLabelMarginValue" class="values">2</label>
<div id="yAxisLabelMarginSlider" class="slider"></div>
</div>
</div>
</div>
</div>
</body>
</html>