製品版のみの機能
ラジアル ゲージ - 目盛り
このサンプルは、ラジアル ゲージで目盛りを設定する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
ゲージの目盛りをユーザーが指定した間隔で表示できます。以上の表を使用してラジアル ゲージ コントロールの目盛りプロパティを設定できます。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></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" />
<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>
<style type="text/css">
.sliderBounds {
width: 95px;
margin: 6px 3px 6px 6px;
display: inline-block;
}
.optionContainer {
width: 154px;
margin: 2px;
padding: 2px;
display: inline-block;
border: 1px solid #e0e0e0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.selectBounds {
width: 120px;
}
</style>
<!-- Target element for the igRadialGauge -->
<div id="radialgauge"></div>
<div>
<fieldset id="gaugeOptions">
<legend>オプション</legend>
<strong>目盛りのサイズ プロパティ</strong>
<br />
<div class="optionContainer">
開始範囲
<br />
<div id="tickmarkStartExtentSlider" class="sliderBounds"></div>
<label id="tickmarkStartExtentLabel">0.50</label>
</div>
<div class="optionContainer">
終了範囲
<br />
<div id="tickmarkEndExtentSlider" class="sliderBounds"></div>
<label id="tickmarkEndExtentLabel">0.57</label>
</div>
<div class="optionContainer">
ストロークの太さ
<br />
<div id="tickmarkStrokeThicknessSlider" class="sliderBounds"></div>
<label id="tickmarkStrokeThicknessLabel">3</label>
</div>
<br />
<strong>副目盛りのサイズ プロパティ</strong>
<br />
<div class="optionContainer">
開始範囲
<br />
<div id="minorTickmarkStartExtentSlider" class="sliderBounds"></div>
<label id="minorTickmarkStartExtentLabel">0.57</label>
</div>
<div class="optionContainer">
終了範囲
<br />
<div id="minorTickmarkEndExtentSlider" class="sliderBounds"></div>
<label id="minorTickmarkEndExtentSliderLabel">0.54</label>
</div>
<div class="optionContainer">
目盛り数
<br />
<div id="tickCountSlider" class="sliderBounds"></div>
<label id="tickCountLabel">5</label>
</div>
<div class="optionContainer">
ストロークの太さ
<br />
<div id="minorTickmarkStrokeThicknessSlider" class="sliderBounds"></div>
<label id="minorTickmarkStrokeThicknessLabel">1</label>
</div>
<br />
<strong>ブラシ</strong>
<br />
<div class="optionContainer">
目盛りのブラシ
<br />
<select id="tickmarkBrushDropdown" class="selectBounds">
<option value="red">レッド</option>
<option value="blue">ブルー</option>
<option value="green">グリーン</option>
<option value="yellow">イエロー</option>
<option value="black" selected="selected">ブラック</option>
</select>
</div>
<div class="optionContainer">
副目盛りのブラシ
<br />
<select id="minorTickmarkBrushDropdown" class="selectBounds">
<option value="red">レッド</option>
<option value="blue">ブルー</option>
<option value="green">グリーン</option>
<option value="yellow">イエロー</option>
<option value="black" selected="selected">ブラック</option>
</select>
</div>
<div class="optionContainer">
トランジション期間
<br />
<div id="transitionDurationSlider" class="sliderBounds"></div>
<label id="transitionDurationLabel">2</label>
</div>
</fieldset>
</div>
<script>
$(function () {
$("#radialgauge").igRadialGauge({
height: "350px",
width: "100%",
transitionDuration: "1500"
});
// Tickmark Start Extent
$("#tickmarkStartExtentSlider").slider({
min: 0,
max: 1,
step: 0.01,
value: 0.5,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "tickStartExtent", ui.value);
$("#tickmarkStartExtentLabel").text(ui.value);
}
});
// Tickmark End Extent
$("#tickmarkEndExtentSlider").slider({
min: 0,
max: 1,
step: 0.01,
value: 0.57,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "tickEndExtent", ui.value);
$("#tickmarkEndExtentLabel").text(ui.value);
}
});
// Tickmark Stroke Thickness
$("#tickmarkStrokeThicknessSlider").slider({
min: 1,
max: 10,
value: 3,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "tickStrokeThickness", ui.value);
$("#tickmarkStrokeThicknessLabel").text(ui.value);
}
});
// Minor Tickmark Start Extent
$("#minorTickmarkStartExtentSlider").slider({
min: 0,
max: 1,
step: 0.01,
value: 0.57,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "minorTickStartExtent", ui.value);
$("#minorTickmarkStartExtentLabel").text(ui.value);
}
});
// Minor Tickmark End Extent
$("#minorTickmarkEndExtentSlider").slider({
min: 0,
max: 1,
step: 0.01,
value: 0.54,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "minorTickEndExtent", ui.value);
$("#minorTickmarkEndExtentLabel").text(ui.value);
}
});
// Tickmark Count
$("#tickCountSlider").slider({
min: 0,
max: 10,
value: 5,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "minorTickCount", ui.value);
$("#tickCountLabel").text(ui.value);
}
});
// Minor Tickmark Stroke Thickness
$("#minorTickmarkStrokeThicknessSlider").slider({
min: 1,
max: 10,
value: 1,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "minorTickStrokeThickness", ui.value);
$("#minorTickmarkStrokeThicknessLabel").text(ui.value);
}
});
// Tickmark Brush
$("#tickmarkBrushDropdown").on({
change: function (e) {
var tickmarkColor = $(this).val();
$("#radialgauge").igRadialGauge("option", "tickBrush", tickmarkColor);
}
});
// Minor Tickmark Brush
$("#minorTickmarkBrushDropdown").on({
change: function (e) {
var minorTickmarkColor = $(this).val();
$("#radialgauge").igRadialGauge("option", "minorTickBrush", minorTickmarkColor);
}
});
// Transiton Duration Slider
$("#transitionDurationSlider").slider({
min: 0,
max: 5,
step: 0.01,
value: 2,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "transitionDuration", ui.value * 1000);
$("#transitionDurationLabel").text(ui.value);
}
});
});
</script>
</body>
</html>