製品版のみの機能
ブレット グラフ - 目盛り設定
このサンプルでは、igBulletGraph コントロールのサポートされる目盛り構成を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
エネルギー源
1 月
(TWh)
(TWh)
2 月
(TWh)
(TWh)
3 月
(TWh)
(TWh)
暖冬により、米国における家庭暖房の天然ガスの需要を縮小しています。さらに、プラスティックや石油化学産業における天然ガスの需要も減ってきています。今年の夏は猛暑になると予測されてはいるものの、平年、5 月は全国的に涼しいために需要が高くなることが予想されていました。しかしながら、需要は低迷しています。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、igBulletGraph コントロールのサポートされる目盛り構成を紹介します。
コード ビュー
クリップボードへコピー
<!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>
<div style="min-width:300px; width:70%" >
<div style="height: 80px">
<h3>エネルギー源</h3>
</div>
<div style="height: 150px">
<div>
1 月<br />
(TWh)
</div>
<div id="bulletgraph1">
</div>
</div>
<div style="height: 150px">
<div>
2 月<br />
(TWh)
</div>
<div id="bulletgraph2">
</div>
</div>
<div style="height: 150px">
<div>
3 月<br />
(TWh)
</div>
<div id="bulletgraph3">
</div>
</div>
</div>
<br />
暖冬により、米国における家庭暖房の天然ガスの需要を縮小しています。さらに、プラスティックや石油化学産業における天然ガスの需要も減ってきています。今年の夏は猛暑になると予測されてはいるものの、平年、5 月は全国的に涼しいために需要が高くなることが予想されていました。しかしながら、需要は低迷しています。
<script type="text/javascript">
$(function () {
var $bulletGraph1 = $("#bulletgraph1");
$bulletGraph1.igBulletGraph({
height: '80px',
width: '100%',
// The interval to use for the ticks. Default value is calculated, rather than predefined, to show 11 ticks based on the minimum and maximum values (in this case value would equal to 75)
//interval: 75,
// Gets or sets the position at which to start rendering the major tickmarks as a value from 0 to 1, measured from the front/bottom of the gauge.
// Values further from zero than 1 can be used to make this extend further than the normal size of the gauge.
tickStartExtent: 0.02,
// Gets or sets the position at which to stop rendering the major tickmarks as a value from 0 to 1, measured from the front/bottom of the gauge.
// Values further from zero than 1 can be used to make this extend further than the normal size of the gauge.
tickEndExtent: 0.2,
// A value to start adding tickmarks, added to the scale's MinimumValue.
ticksPostInitial: 0,
// A value to stop adding tickmarks, subtracted from the scale's MaximumValue.
ticksPreTerminal: 0,
// Gets or sets the stroke thickness to use when rendering ticks.
tickStrokeThickness: 2,
// Gets or sets the brush to use for the major tickmarks.
tickBrush: 'black',
// Gets or sets the number of minor tickmarks to place between major tickmarks.
minorTickCount: 3,
// Gets or sets the position at which to start rendering the minor tickmarks as a value from 0 to 1, measured from the front/bottom of the gauge.
// Values further from zero than 1 can be used to make this extend further than the normal size of the gauge.
minorTickStartExtent: 0.06,
// Gets or sets the position at which to stop rendering the minor tickmarks as a value from 0 to 1, measured from the front/bottom of the gauge.
// Values further from zero than 1 can be used to make this extend further than the normal size of the gauge.
minorTickEndExtent: 0.2,
// Gets or sets the stroke thickness to use when rendering minor ticks.
minorTickStrokeThickness: 1,
// Gets or sets the brush to use for the minor tickmarks.
minorTickBrush: '#EBEBEB',
ranges: [
{
name: 'range1',
startValue: 0,
endValue: 450
},
{
name: 'range2',
startValue: 450,
endValue: 600,
},
{
name: 'range3',
startValue: 600,
endValue: 750
}
],
maximumValue: 750,
targetValue: 550,
value: 555
});
var $bulletGraph2 = $("#bulletgraph2");
$bulletGraph2.igBulletGraph({
height: '80px',
width: '100%',
// The interval to use for the ticks.
interval: 150,
// Gets or sets the brush to use for the major tickmarks.
tickBrush: 'Black',
// Gets or sets the stroke thickness to use when rendering ticks.
tickStrokeThickness: 3,
// Gets or sets the number of minor tickmarks to place between major tickmarks.
minorTickCount: 4,
// Gets or sets the brush to use for the minor tickmarks.
minorTickBrush: '#F79646',
// Gets or sets the stroke thickness to use when rendering minor ticks.
minorTickStrokeThickness: 2,
// Gets or sets the brush to use for the minor tickmarks.
ranges: [
{
name: 'range1',
startValue: 0,
endValue: 300
},
{
name: 'range2',
startValue: 300,
endValue: 570
},
{
name: 'range3',
startValue: 570,
endValue: 750
}
],
maximumValue: 750,
targetValue: 620,
labelInterval: 150,
value: 600
});
var $bulletGraph3 = $("#bulletgraph3");
$bulletGraph3.igBulletGraph({
height: '80px',
width: '100%',
interval: 150,
tickBrush: '#F79646',
// Gets or sets the position at which to start rendering the major tickmarks as a value from 0 to 1, measured from the front/bottom of the gauge.
// Values further from zero than 1 can be used to make this extend further than the normal size of the gauge.
tickStartExtent: 0.95,
// Gets or sets the position at which to stop rendering the major tickmarks as a value from 0 to 1, measured from the front/bottom of the gauge.
// Values further from zero than 1 can be used to make this extend further than the normal size of the gauge.
tickEndExtent: 0.15,
tickStrokeThickness: 3,
minorTickCount: 4,
// Gets or sets the position at which to start rendering the minor tickmarks as a value from 0 to 1, measured from the front/bottom of the gauge.
// Values further from zero than 1 can be used to make this extend further than the normal size of the gauge.
minorTickStartExtent:.35,
// Gets or sets the position at which to stop rendering the minor tickmarks as a value from 0 to 1, measured from the front/bottom of the gauge.
// Values further from zero than 1 can be used to make this extend further than the normal size of the gauge.
minorTickEndExtent: 0.2,
minorTickStrokeThickness: 1,
minorTickBrush: 'white',
// A value to start adding tickmarks, added to the scale's MinimumValue.
ticksPostInitial: 50,
// A value to stop adding tickmarks, subtracted from the scale's MaximumValue.
ticksPreTerminal: 100,
ranges: [
{
name: 'range1',
startValue: 0,
endValue: 300
},
{
name: 'range2',
startValue: 300,
endValue: 570
},
{
name: 'range3',
startValue: 570,
endValue: 750
}
],
labelsPostInitial: 50,
labelsPreTerminal: 100,
maximumValue: 750,
targetValue: 600,
labelInterval: 100,
value: 575
});
});
</script>
</body>
</html>