製品版のみの機能

ファンネルチャート - ベジエ曲線およびツールチップ

ファンネルチャート

ベジエ曲線図形のチャート

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイルデバイスで画面を回転、フルサイズ表示、またはその他のデバイスにメールで送信します。

このサンプルでは、チャート図形でベジエ曲線を使用し、ファンネルチャートの外観を変更します。また、マウスがファンネルチャートのスライスの上にホバーしたときにツールチップを表示します。

コードビュー

JsFiddle で表示

クリップボードへコピー

HTML

                    <!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/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" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>
	
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js" type="text/javascript"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js" type="text/javascript"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/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 = [
            { Id: 0, Budget: 30, Department: "事務" },
            { Id: 1, Budget: 50, Department: "セールス" },
            { Id: 2, Budget: 60, Department: "IT" },
            { Id: 3, Budget: 50, Department: "マーケティング" },
            { Id: 4, Budget: 100, Department: "開発" },
            { Id: 5, Budget: 20, Department: "サポート" }
        ];

        $(function () {
            //  Create a basic funnel chart with regular layout
            $("#chartNormal").igFunnelChart({
                width: "100%",
                height: "450px",
                dataSource: data,
                valueMemberPath: "Budget",
                innerLabelMemberPath: "Budget",
                innerLabelVisibility: "visible",
                tooltipTemplate: "<span>ID:${Id}<br>分門:${Department}</span>"
            });

            //  Create a funnel chart with Bezier curved shape. You can control the exact shape of 
            //  the Bezier curve By varying the upperBezierControlPoint & lowerBezierControlPoint.
            $("#chartBezier").igFunnelChart({
                width: "100%",
                height: "450px",
                leftMargin: 20,
                dataSource: data,
                valueMemberPath: "Budget",
                innerLabelMemberPath: "Budget",
                innerLabelVisibility: "visible",
                tooltipTemplate: "<span>ID:${Id}<br>分門:${Department}</span>",
                useBezierCurve: true,
                bezierPoints: "0.1 0.1 0.7 1"
            });
        });
    </script>

    <div class="sampleContent">
        <div class="chartContainer" style="z-index: 2">
            <h4>ファンネル チャート</h4>
            <div id="chartNormal"></div>
        </div>
        <div class="chartContainer" style="z-index: 1">
            <h4>ベジエ曲線図形のチャート</h4>
            <div id="chartBezier"></div>
        </div>
    </div>
</body>
</html>

Ignite UI for jQuery | サンプル

検索結果

ファンネルチャート - ベジエ曲線およびツールチップ

ファンネルチャート

ベジエ曲線図形のチャート

コードビュー

Ignite UI for jQuery | サンプル

検索結果

ファンネル チャート - ベジエ曲線およびツールチップ

ファンネル チャート

ベジエ曲線図形のチャート

コード ビュー

ファンネルチャート - ベジエ曲線およびツールチップ

ファンネルチャート

コードビュー