製品版のみの機能
ファンネル チャート - スタイル設定
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
CSS のスタイル設定
Widget オプションのスタイル設定
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、igFunnelChart コントロールのルック アンド フィールを変更する方法を紹介します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/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/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js" type="text/javascript"></script>
</head>
<body>
<link href="/css/charts/chart-samples.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
var data = [
{ Budget: 30, Department: "事務" },
{ Budget: 50, Department: "セールス" },
{ Budget: 60, Department: "IT" },
{ Budget: 50, Department: "マーケティング" },
{ Budget: 100, Department: "開発" },
{ Budget: 20, Department: "サポート" }
];
$(function () {
// Create a regular funnel chart: It is styled according to the CSS in the infragistics.theme.css
// The styles are redefined later in the <style> node of the page
$("#chartCSS").igFunnelChart({
width: "100%",
height: "430px",
dataSource: data,
tooltipTemplate: "${Department}: ${Budget}",
valueMemberPath: "Budget",
innerLabelMemberPath: "Budget",
innerLabelVisibility: "visible",
outerLabelMemberPath: "Department",
outerLabelVisibility: "visible"
});
// Create a funnel chart with brushes and outlines options set with specific colors
$("#chartOptions").igFunnelChart({
width: "100%",
height: "430px",
dataSource: data,
tooltipTemplate: "${Department}: ${Budget}",
outlineThickness: 3,
bottomEdgeWidth: 0.25,
outerLabelAlignment: "right",
brushes: ["#7DC3D9", "#3e5354", "#9EB5B4", "#5DD1C6", "#AFD1CE", "#2B768E"],
outlines: [ "#3189A6", "#212D2E", "#5C7877", "#2FA498", "#487D78", "#163F4B" ],
valueMemberPath: "Budget",
innerLabelMemberPath: "Budget",
innerLabelVisibility: "visible",
outerLabelMemberPath: "Department",
outerLabelVisibility: "visible"
});
});
</script>
<style type="text/css">
/* Redefine the styles from infragistics.theme.css that define fill and border colors for slices */
.customCss .ui-chart-palette-1 { border-color: #00AADE; background-color: #00AADE }
.customCss .ui-chart-palette-2 { border-color: #4B4B4D; background-color: #4B4B4D }
.customCss .ui-chart-palette-3 { border-color: #FCB025; background-color: #FCB025 }
.customCss .ui-chart-palette-4 { border-color: #EC6C2B; background-color: #EC6C2B }
.customCss .ui-chart-palette-5 { border-color: #36C0F3; background-color: #36C0F3 }
.customCss .ui-chart-palette-6 { border-color: #5B17A8; background-color: #5B17A8 }
.customCss .ui-funnel {
font-family: verdana;
font-weight: bold;
font-style: italic;
font-size: 12px;
color: #d00000;
}
.customCss .ui-funnel-slice { color: yellow; }
.customCss .ui-funnel-tooltip {
font-family: 'Courier New';
background: #e0e0f0;
border: 1px solid #8080e0;
font-size: 18px;
color: #8000a0;
}
</style>
<div class="sampleContent">
<div style="display: inline-block; height: 460px; width: 44%; z-index: 2; position: relative;" class="customCss">
<h4>CSS のスタイル設定</h4>
<div id="chartCSS" style="border: none;"></div>
</div>
<div style="display: inline-block; height: 460px; width: 44%; margin-left: 1.5%;">
<h4>Widget オプションのスタイル設定</h4>
<div id="chartOptions" style="border: none;"></div>
</div>
</div>
</body>
</html>