製品版のみの機能
カテゴリ チャート - 軸目盛
このサンプルでは、カテゴリ チャート コントロールで軸目盛を使用し、外観を変更する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
X 軸オプション
Y 軸オプション
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CategoryChart Axis Tickmarks</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" />
<style type="text/css">
.chart {
position: relative;
float: left;
margin-right: 10px;
}
.optionsPane {
position: relative;
float: initial;
width: 270px;
margin: 6px 3px 6px 6px;
display: inline-block;
padding-top: 18px;
}
.optionsColumn {
float: left;
position: relative;
/*width: 300px;*/
margin: 2px;
padding: 2px;
display: inline-block;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border: 1px solid #e0e0e0;
}
.slider {
width: 250px;
margin: 10px 10px 4px 6px;
padding-right: 3px;
padding-left: 3px;
display: inline-block;
float: left;
}
.values {
padding-left: 7px;
padding-right: 0px;
width: 30px;
}
.selector {
width: 250px;
margin: 10px 10px 4px 6px;
padding-right: 3px;
padding-left: 3px;
display: inline-block;
float: left;
}
</style>
<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>
</head>
<body>
<div id="chart" class="chart" style="width:600px;height:400px"></div>
<div class="optionsPane">
<div><b>X 軸オプション</b></div>
<div class="optionsColumn">
<div>
<label>長さ:</label>
<label id="XAxisTickmarkLength" class="values">5</label>
<div id="XAxisTickmarkLengthSlider" class="slider"></div>
</div>
<div>
<label>太さ:</label>
<label id="XAxisTickmarkThickness" class="values">3</label>
<div id="XAxisTickmarkThicknessSlider" class="slider"></div>
</div>
<div>
<label>ストローク:</label>
<select class="selector" id="XAxixTickmarkColorPicker">
<option value="gray">gray</option>
<option value="blue">blue</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="orange">orange</option>
<option value="violet">violet</option>
<option value="indigo">indigo</option>
<option value="black">black</option>
<option value="white">white</option>
</select>
</div>
</div>
</div>
<div class="optionsPane">
<div><b>Y 軸オプション</b></div>
<div class="optionsColumn">
<div>
<label>長さ:</label>
<label id="YAxisTickmarkLength" class="values">5</label>
<div id="YAxisTickmarkLengthSlider" class="slider"></div>
</div>
<div>
<label>太さ:</label>
<label id="YAxisTickmarkThickness" class="values">3</label>
<div id="YAxisTickmarkThicknessSlider" class="slider"></div>
</div>
<div>
<label>ストローク:</label>
<select class="selector" id="YAxixTickmarkColorPicker">
<option value="gray">gray</option>
<option value="blue">blue</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="orange">orange</option>
<option value="violet">violet</option>
<option value="indigo">indigo</option>
<option value="black">black</option>
<option value="white">white</option>
</select>
</div>
</div>
</div>
<script type="text/javascript">
var data = [
{ "CountryName": "CHN", "Population 1995": 1216, "Population 2005": 1297, "Population 2015": 1361, "Population 2025": 1394 },
{ "CountryName": "IND", "Population 1995": 920, "Population 2005": 1090, "Population 2015": 1251, "Population 2025": 1396 },
{ "CountryName": "USA", "Population 1995": 266, "Population 2005": 295, "Population 2015": 322, "Population 2025": 351 },
{ "CountryName": "BRA", "Population 1995": 161, "Population 2005": 186, "Population 2015": 204, "Population 2025": 218 }
];
// CODE SNIPPET
$(function () {
$("#chart").igCategoryChart({
dataSource: data,
chartType: "auto",
xAxisTickLength: 10,
yAxisTickLength: 10,
xAxisTickStrokeThickness: 1,
yAxisTickStrokeThickness: 1,
xAxisTickStroke: "gray",
yAxisTickStroke: "gray",
});
});
// CODE SNIPPET
$("#chart").igCategoryChart({ title: "国別人口" });
$("#YAxixTickmarkColorPicker").change(function (e) {
var brush = $(this).val();
$("#chart").igCategoryChart("option", "yAxisTickStroke", brush);
});
$("#XAxixTickmarkColorPicker").change(function (e) {
var brush = $(this).val();
$("#chart").igCategoryChart("option", "xAxisTickStroke", brush);
});
$("#XAxisTickmarkLengthSlider").slider({
min: 1, max: 50, value: 10,
slide: function (e, ui) {
$("#chart").igCategoryChart("option", "xAxisTickLength", ui.value);
$("#XAxisTickmarkLength").text(ui.value);
}
});
$("#YAxisTickmarkLengthSlider").slider({
min: 1, max: 50, value: 10,
slide: function (e, ui) {
$("#chart").igCategoryChart("option", "yAxisTickLength", ui.value);
$("#YAxisTickmarkLength").text(ui.value);
}
});
$("#XAxisTickmarkThicknessSlider").slider({
min: 1, max: 20, value: 2,
slide: function (e, ui) {
$("#chart").igCategoryChart("option", "xAxisTickStrokeThickness", ui.value);
$("#XAxisTickmarkThickness").text(ui.value);
}
});
$("#YAxisTickmarkThicknessSlider").slider({
min: 1, max: 20, value: 2,
slide: function (e, ui) {
$("#chart").igCategoryChart("option", "yAxisTickStrokeThickness", ui.value);
$("#YAxisTickmarkThickness").text(ui.value);
}
});
</script>
</body>
</html>