製品版のみの機能
シェープ チャート - 軸タイトルの構成
このサンプルで igShapeChart で軸タイトルを構成する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
X 軸オプション
Y 軸オプション
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<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/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" />
<!-- 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>
<title>ShapeChart Axis Titles</title>
</head>
<body>
<script>
$(function () {
// CODE SNIPPET
$("#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",
xAxisTitle: "X 軸タイトル",
yAxisTitle: "Y 軸タイトル",
xAxisTitleTextColor: "gray",
yAxisTitleTextColor: "gray",
xAxisTitleTextStyle: "10pt Verdana",
yAxisTitleTextStyle: "10pt Verdana",
xAxisTitleTopMargin: 5,
xAxisTitleBottomMargin: 5,
yAxisTitleRightMargin: 5,
yAxisTitleLeftMargin: 5,
xAxisTitlelAngle: 0,
yAxisTitlelAngle: 90,
xAxisMinimumValue: -180,
xAxisMaximumValue: 180,
yAxisMinimumValue: -90,
yAxisMaximumValue: 90,
xAxisInterval: 30,
yAxisInterval: 30,
isHorizontalZoomEnabled: true,
isVerticalZoomEnabled: true,
});
// CODE SNIPPET
$("#xAxisTitleAngleSlider").slider(
{
min: -90, max: 90, value: 0,
slide: function (e, ui) {
$("#shapeChart").igShapeChart("option", "xAxisTitleAngle", ui.value);
$("#xAxisTitleAngleValue").text(ui.value);
}
});
$("#xAxisTitleFontSizeSlider").slider(
{
min: 5, max: 15, value: 10,
slide: function (e, ui) {
var size = ui.value + "pt";
var style = size + " " + "Verdona";
$("#shapeChart").igShapeChart("option", "xAxisTitleTextStyle", style);
$("#xAxisTitleFontSizeValue").text(ui.value);
}
});
$("#xAxisTitleMarginSlider").slider(
{
min: 0, max: 25, value: 5,
slide: function (e, ui) {
$("#shapeChart").igShapeChart("option", "xAxisTitleTopMargin", ui.value);
$("#xAxisTitleMarginValue").text(ui.value);
}
});
$("#yAxisTitleAngleSlider").slider(
{
min: -90, max: 90, value: 0,
slide: function (e, ui) {
$("#shapeChart").igShapeChart("option", "yAxisTitleAngle", ui.value);
$("#yAxisTitleAngleValue").text(ui.value);
}
});
$("#yAxisTitleFontSizeSlider").slider(
{
min: 5, max: 15, value: 10,
slide: function (e, ui) {
var size = ui.value + "pt";
var style = size + " " + "Verdona";
$("#shapeChart").igShapeChart("option", "yAxisTitleTextStyle", style);
$("#yAxisTitleFontSizeValue").text(ui.value);
}
});
$("#yAxisTitleMarginSlider").slider(
{
min: 0, max: 25, value: 5,
slide: function (e, ui) {
$("#shapeChart").igShapeChart("option", "yAxisTitleRightMargin", ui.value);
$("#yAxisTitleMarginValue").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="xAxisTitleAngleValue" class="values">0</label>
<div id="xAxisTitleAngleSlider" class="slider"></div>
</div>
<div>
<label>軸タイトルのフォント サイズ</label>
<label id="xAxisTitleFontSizeValue" class="values">10</label>
<div id="xAxisTitleFontSizeSlider" class="slider"></div>
</div>
<div>
<label>軸タイトルのマージン</label>
<label id="xAxisTitleMarginValue" class="values">5</label>
<div id="xAxisTitleMarginSlider" class="slider"></div>
</div>
</div>
</div>
<div class="optionsPane">
<div><b>Y 軸オプション</b></div>
<div class="optionsColumn">
<div>
<label>軸タイトルの角度</label>
<label id="yAxisTitleAngleValue" class="values">0</label>
<div id="yAxisTitleAngleSlider" class="slider"></div>
</div>
<div>
<label>軸タイトルのフォント サイズ</label>
<label id="yAxisTitleFontSizeValue" class="values">10</label>
<div id="yAxisTitleFontSizeSlider" class="slider"></div>
</div>
<div>
<label>軸タイトルのマージン</label>
<label id="yAxisTitleMarginValue" class="values">5</label>
<div id="yAxisTitleMarginSlider" class="slider"></div>
</div>
</div>
</div>
</div>
</body>
</html>