製品版のみの機能
カテゴリ チャート - 軸線
このサンプルでは、カテゴリ チャートの主グリッド線および副グリッド線を追加し、外観を変更する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
X 軸オプション
Y 軸オプション
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Axis Intervals</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: 280px;*/
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;
}
.labels {
padding-right: 7px;
}
.values {
padding-left: 7px;
padding-right: 0px;
width: 30px;
}
</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 >
<div class="optionsPane">
<div><b>X 軸オプション</b></div>
<div class="optionsColumn">
<label class="labels">主グリッド線の表示:</label>
<input class="checkbox" id="xAxisMajorCheckbox" type="checkbox" checked />
<div>
<label class="labels">$$(AxisMajorGridlinesInterval)</label>
<label class="values" id="xAxisMajorIntervalLabel">1</label>
<div class="slider" id="xAxisMajorIntervalSlider"></div>
</div>
<div>
<label class="labels">主グリッド線の太さ:</label>
<label class="values" id="xAxisMajorStrokeThicknessLabel" >1</label>
<div class="slider" id="xAxisMajorStrokeThicknessSlider" ></div>
</div>
<label class="labels">副グリッド線の表示:</label>
<input class="checkbox" id="xAxisMinorCheckbox" type="checkbox" checked />
<div>
<label class="labels">補助目盛り間隔:</label>
<label class="values" id="xAxisMinorIntervalLabel">0.5</label>
<div class="slider" id="xAxisMinorIntervalSlider"></div>
</div>
<div>
<label class="labels">副グリッド線の太さ:</label>
<label class="values" id="xAxisMinorStrokeThicknessLabel" >0.5</label>
<div class="slider" id="xAxisMinorStrokeThicknessSlider" ></div>
</div>
</div>
</div>
<div class="optionsPane">
<div><b>Y 軸オプション</b></div>
<div class="optionsColumn">
<label class="labels">主グリッド線の表示:</label>
<input class="checkbox" id="yAxisMajorCheckbox" type="checkbox" checked/>
<div>
<label class="labels">$$(AxisMajorGridlinesInterval)</label>
<label class="values" id="yAxisMajorIntervalLabel">500</label>
<div class="slider" id="yAxisMajorIntervalSlider"></div>
</div>
<div>
<label class="labels">主グリッド線の太さ:</label>
<label class="values" id="yAxisMajorStrokeThicknessLabel" >1</label>
<div class="slider" id="yAxisMajorStrokeThicknessSlider" ></div>
</div>
<label class="labels">副グリッド線の表示:</label>
<input id="yAxisMinorCheckbox" type="checkbox" class="checkbox" checked/>
<div>
<label class="labels">補助目盛り間隔:</label>
<label class="values" id="yAxisMinorIntervalLabel">250</label>
<div class="slider" id="yAxisMinorIntervalSlider"></div>
</div>
<div>
<label class="labels" >副グリッド線の太さ:</label>
<label class="values" id="yAxisMinorStrokeThicknessLabel">0.5</label>
<div class="slider" id="yAxisMinorStrokeThicknessSlider"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var transparentBrush = "rgba(0,0,0,0)";
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({
xAxisMinorStroke: "Red",
yAxisMinorStroke: "Red",
yAxisMajorStroke: "Green",
xAxisMajorStroke: "Green",
xAxisMajorStrokeThickness: 1.0,
yAxisMajorStrokeThickness: 1.0,
xAxisMinorStrokeThickness: 0.5,
yAxisMinorStrokeThickness: 0.5,
xAxisMinorInterval: 0.5,
yAxisMinorInterval: 250,
xAxisInterval: 1,
yAxisInterval: 500,
yAxisMinimumValue: 0,
yAxisMaximumValue: 1500,
dataSource: data,
chartType: "column",
});
});
// CODE SNIPPET
$("#chart").igCategoryChart({ title: "国別人口" });
$("#chart").igCategoryChart({
yAxisFormatLabel: function (value) {
return value + " M";
}
});
// event handers
$("#xAxisMajorCheckbox").click(function (e) {
var brush = $("#xAxisMajorCheckbox").is(":checked") ? "Green" : transparentBrush;
$("#chart").igCategoryChart("option", "xAxisMajorStroke", brush);
});
$("#xAxisMinorCheckbox").click("change", function () {
var brush = ($(this).is(":checked")) ? "Red" : transparentBrush;
$("#chart").igCategoryChart("option", "xAxisMinorStroke", brush);
});
$("#yAxisMajorCheckbox").click("change", function () {
var brush = ($(this).is(":checked")) ? "Green" : transparentBrush;
$("#chart").igCategoryChart("option", "yAxisMajorStroke", brush);
});
$("#yAxisMinorCheckbox").click("change", function () {
var brush = ($(this).is(":checked")) ? "Red" : transparentBrush;
$("#chart").igCategoryChart("option", "yAxisMinorStroke", brush);
});
$("#xAxisMajorStrokeThicknessSlider").slider({
min: 5, max: 50, value: 10,
slide: function (e, ui) {
var thickness = ui.value * 0.1;
$("#chart").igCategoryChart("option", "xAxisMajorStrokeThickness", thickness);
$("#xAxisMajorStrokeThicknessLabel").text(thickness.toFixed(1));
}
});
$("#xAxisMinorStrokeThicknessSlider").slider({
min: 5, max: 50, value: 10,
slide: function (e, ui) {
var thickness = ui.value * 0.1;
$("#chart").igCategoryChart("option", "xAxisMinorStrokeThickness", thickness);
$("#xAxisMinorStrokeThicknessLabel").text(thickness.toFixed(1));
}
});
$("#yAxisMajorStrokeThicknessSlider").slider({
min: 5, max: 50, value: 10,
slide: function (e, ui) {
var thickness = ui.value * 0.1;
$("#chart").igCategoryChart("option", "yAxisMajorStrokeThickness", thickness);
$("#yAxisMajorStrokeThicknessLabel").text(thickness.toFixed(1));
}
});
$("#yAxisMinorStrokeThicknessSlider").slider({
min: 5, max: 50, value: 10,
slide: function (e, ui) {
var thickness = ui.value * 0.1;
$("#chart").igCategoryChart("option", "yAxisMinorStrokeThickness", thickness);
$("#yAxisMinorStrokeThicknessLabel").text(thickness.toFixed(1));
}
});
$("#xAxisMajorIntervalSlider").slider({
min: 1, max: 5, value: 1,
slide: function (e, ui) {
var interval = ui.value;
$("#chart").igCategoryChart("option", "xAxisInterval", interval);
$("#xAxisMajorIntervalLabel").text(interval.toFixed(1));
}
});
$("#yAxisMajorIntervalSlider").slider({
min: 200, max: 1500, value: 500,
slide: function (e, ui) {
var interval = ui.value;
$("#chart").igCategoryChart("option", "yAxisInterval", interval);
$("#yAxisMajorIntervalLabel").text(interval);
}
});
$("#xAxisMinorIntervalSlider").slider({
min: 1, max: 10, value: 5,
slide: function (e, ui) {
var interval = ui.value * 0.1;
$("#chart").igCategoryChart("option", "xAxisMinorInterval", interval);
$("#xAxisMinorIntervalLabel").text(interval.toFixed(1));
}
});
$("#yAxisMinorIntervalSlider").slider({
min: 100, max: 500, value: 250,
slide: function (e, ui) {
var interval = ui.value;
$("#chart").igCategoryChart("option", "yAxisMinorInterval", interval);
$("#yAxisMinorIntervalLabel").text(interval);
}
});
</script>
</body>
</html>