製品版のみの機能
ブレット グラフ - ツールチップ設定
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
タスク実装の進行状況
開発タスク
品質保証タスク
このタスクは 3 週間で同時に実行されますが、開発に他のタスク以上の時間が費やされました。進行状況バーは、タスク完了の可能性を表す状態範囲 (「高」、「中」、「低」) を表します。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、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" />
<!-- Used to style the API Viewer and Explorer UI -->
<link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />
<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>
<script id="rangeToolTipTemplate" type="text/x-jquery-tmpl">
<div style="background-color: #3E3E3E; border: 1px solid black; font-size: 120%; font-weight: bold; padding: 5px 10px; border-radius: 0em 1em 0em 1em; color:${itemBrush}">
${item.name}
<br />
開始日付: ${item.startValue}<br />
終了日付: ${item.endValue}
</div>
</script>
<script id="valueToolTipTemplate" type="text/x-jquery-tmpl">
<div style="background-color: #3E3E3E; border: 1px solid black; font-size: 120%; font-weight: bold; padding: 5px 10px; border-radius: 0em 1em 0em 1em; color:white">
${itemName}: ${item.value}
</div>
</script>
<script id="targetValueToolTipTemplate" type="text/x-jquery-tmpl">
<div style="background-color: #3E3E3E; border: 1px solid black; font-size: 120%; font-weight: bold; padding: 5px 10px; border-radius: 0em 1em 0em 1em; color:white">
予定期間: ${item.value}
</div>
</script>
</head>
<body>
<div>
<h3 style="height: 100px">タスク実装の進行状況</h3>
<div style="height: 200px">
<div style="width: 30%">
開発タスク
</div>
<div style="width: 70%" id="bulletgraph_task1" />
</div>
<div style="height: 200px">
<div style="width: 30%">
品質保証タスク
</div>
<div style="width: 70%" id="bulletgraph_task2" />
</div>
<div style="float: left">このタスクは 3 週間で同時に実行されますが、開発に他のタスク以上の時間が費やされました。進行状況バーは、タスク完了の可能性を表す状態範囲 (「高」、「中」、「低」) を表します。</div>
</div>
<script type="text/javascript">
$(function () {
$("#bulletgraph_task1").igBulletGraph({
height: "80px",
width: "100%",
showToolTip: true,
ranges: [
{
name: '低',
startValue: 0,
endValue: 40,
brush: "#F66656"
},
{
name: '中',
startValue: 40,
endValue: 70,
brush: "#FFDA30"
},
{
name: '高',
startValue: 70,
endValue: 100,
brush: "#72CA70"
}
],
formatLabel: function (evt, ui) {
ui.label = ui.value + "h";
},
value: 60,
targetValue: 80,
targetValueBreadth: 6,
transitionDuration: 500
});
$("#bulletgraph_task2").igBulletGraph({
height: "80px",
width: "100%",
showToolTip: true,
rangeToolTipTemplate: 'rangeToolTipTemplate',
valueToolTipTemplate: 'valueToolTipTemplate',
targetValueToolTipTemplate: 'targetValueToolTipTemplate',
ranges: [
{
name: '低',
startValue: 0,
endValue: 20,
brush: "#F66656"
},
{
name: '中',
startValue: 20,
endValue: 35,
brush: "#FFDA30"
},
{
name: '高',
startValue: 35,
endValue: 50,
brush: "#72CA70"
}
],
formatLabel: function (evt, ui) {
ui.label = ui.value + "h";
},
valueName: "消費時間",
maximumValue: 50,
value: 23,
targetValue: 40,
targetValueBreadth: 6,
transitionDuration: 500
});
});
</script>
</body>
</html>