製品版のみの機能
ラジアル ゲージ - 範囲設定
このサンプルは、ラジアル ゲージで範囲プロパティを設定する方法を紹介します。
このサンプルは 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;
}
</style>
<!-- Target element for the igRadialGauge -->
<div id="radialgauge"></div>
<div>
<fieldset id="gaugeOptions">
<legend>オプション</legend>
<div class="optionContainer">
内部の開始範囲
<br />
<div id="innerStartExtentSlider" class="sliderBounds"></div>
<label id="innerStartExtentLabel">0.5</label>
</div>
<div class="optionContainer">
内部の終了範囲
<br />
<div id="innerEndExtentSlider" class="sliderBounds"></div>
<label id="innerEndExtentLabel">0.5</label>
</div>
<div class="optionContainer">
外部の開始範囲
<br />
<div id="outerStartExtentSlider" class="sliderBounds"></div>
<label id="outerStartExtentLabel">0.72</label>
</div>
<div class="optionContainer">
外部の終了範囲
<br />
<div id="outerEndExtentSlider" class="sliderBounds"></div>
<label id="outerEndExtentLabel">.78</label>
</div>
<div class="optionContainer">
開始値
<br />
<div id="startValueSlider" class="sliderBounds"></div>
<label id="startValueLabel">70</label>
</div>
<div class="optionContainer">
終了値
<div id="endValueSlider" class="sliderBounds"></div>
<label id="endValueLabel">100</label>
</div>
<div class="optionContainer">
トランジション期間
<br />
<div id="transitionDurationSlider" class="sliderBounds"></div>
<label id="transitionDurationLabel">2</label>
</div>
<div class="optionContainer">
ブラシ
<br />
<select id="brushDropdown" class="selectBounds">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="black" selected="selected">Black</option>
</select>
</div>
<div class="optionContainer">
アウトライン ブラシ
<br />
<select id="outlineBrushDropdown" class="selectBounds">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="black" selected="selected">Black</option>
</select>
</div>
</fieldset>
</div>
<script>
$(function() {
$("#radialgauge").igRadialGauge({
height: "350px",
width: "100%",
transitionDuration: "1500",
ranges: [{
name: "range1",
brush: "rgba(164, 189, 41, 1)",
startValue: "70",
endValue: "100",
outerStartExtent: "0.55",
outerEndExtent: "0.65"
}]
});
// Inner Start Extent
$("#innerStartExtentSlider").slider({
min: 0,
max: 1,
step: 0.01,
value: 0.5,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", innerStartExtent: ui.value }]);
$("#innerStartExtentLabel").text(ui.value);
}
});
// Inner End Extent
$("#innerEndExtentSlider").slider({
min: 0,
max: 1,
step: 0.01,
value: 0.5,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", innerEndExtent: ui.value }]);
$("#innerEndExtentLabel").text(ui.value);
}
});
// Outer Start Extent
$("#outerStartExtentSlider").slider({
min: 0,
max: 1,
step: 0.01,
value: 0.72,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", outerStartExtent: ui.value }]);
$("#outerStartExtentLabel").text(ui.value);
}
});
// Outer End Extent
$("#outerEndExtentSlider").slider({
min: 0,
max: 1,
step: 0.01,
value: 0.78,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", outerEndExtent: ui.value }]);
$("#outerEndExtentLabel").text(ui.value);
}
});
// Start Value
$("#startValueSlider").slider({
min: 0,
max: 100,
value: 70,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", startValue: ui.value }]);
$("#startValueLabel").text(ui.value);
}
});
// End Value
$("#endValueSlider").slider({
min: 0,
max: 100,
value: 100,
slide: function (event, ui) {
$("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", endValue: ui.value }]);
$("#endValueLabel").text(ui.value);
}
});
// 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);
}
});
// Brush
$("#brushDropdown").on({
change: function (e) {
var rangeColor = $(this).val();
$("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", brush: rangeColor }]);
}
});
// Outline Brush
$("#outlineBrushDropdown").on({
change: function (e) {
var outlineColor = $(this).val();
$("#radialgauge").igRadialGauge("option", "ranges", [{ name: "range1", outline: outlineColor }]);
}
});
});
</script>
</body>
</html>