製品版のみの機能
ブレット グラフ - TypeScript の使用
このサンプルでは、TypeScript でブレット グラフ コントロールのパフォーマンス バー、比較目盛マーカー、およびスケールのサイズを構成する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
利益
平均注文
新しい顧客
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、TypeScript でブレット グラフ コントロールのパフォーマンス バー、比較目盛マーカー、およびスケールのサイズを構成する方法を紹介します。
コード ビュー
クリップボードへコピー
<!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>
<div style="width:30%">
利益
</div>
<div id="bulletgraph1"></div>
</div>
<div>
<div style="width:30%">
平均注文
</div>
<div id="bulletgraph2"></div>
</div>
<div>
<div style="width:30%">
新しい顧客
</div>
<div id="bulletgraph3"></div>
</div>
<script src="/TypeScriptSamples/bullet-graph/typescript.js"></script>
</body>
</html>
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
$(function () {
$("#bulletgraph1").igBulletGraph({
width: "100%",
height: "80px",
ranges: [
{
brush: '#803E01',
name: '低い',
startValue: 0,
endValue: 3000
},
{
brush: '#BA5A05',
name: '許容範囲',
startValue: 3000,
endValue: 4000
},
{
brush: '#FF7A04',
name: '高い',
startValue: 4000,
endValue: 10000
}
],
minimumValue: 0,
maximumValue: 10000,
value: 5000,
valueInnerExtent: 0.5,
valueOuterExtent: 0.65,
targetValue: 6000,
targetValueBreadth: 12,
showToolTip: true,
formatLabel: function (evt, ui) {
(<HTMLOptGroupElement>ui).label += "K";
}
});
$("#bulletgraph2").igBulletGraph({
width: "100%",
height: "80px",
ranges: [
{
brush: '#566509',
name: '低い',
startValue: 0,
endValue: 250
},
{
brush: '#7F950C',
name: '許容範囲',
startValue: 250,
endValue: 300
},
{
brush: '#AABF31',
name: '高い',
startValue: 300,
endValue: 500
}
],
minimumValue: 0,
maximumValue: 500,
value: 350,
valueInnerExtent: 0.35,
valueOuterExtent: 0.8,
targetValue: 400,
showToolTip: true,
formatLabel: function (evt, ui: HTMLOptGroupElement) {
ui.label += "K";
}
});
$("#bulletgraph3").igBulletGraph({
width: "100%",
height: "80px",
ranges: [
{
brush: '#11364D',
name: '低い',
startValue: 0,
endValue: 5
},
{
brush: '#164F6D',
name: '許容範囲',
startValue: 5,
endValue: 20
},
{
brush: '#20789F',
name: '高い',
startValue: 20,
endValue: 100
}
],
maximumValue: 100,
value: 15,
targetValue: 25,
valueBrush: "#B3E0F7",
targetValueBrush: "#B3E0F7",
targetValueOutline: "#B3E0F7",
showToolTip: true,
formatLabel: function (evt, ui: HTMLOptGroupElement) {
ui.label = ui.label + "%";
}
});
});