製品版のみの機能

データチャート - 十字ポインターレイヤー

このサンプルは、ターゲットとする実際の値に一致する十字線を提供する十字ポインターレイヤーを紹介します。このサンプルオプションペインでは、十字ポインターの太さなど、レイヤープロパティを編集できます。

カテゴリ項目ハイライトオプション

ブラシ

ブラシの幅 1

不透明度 1

補間の使用

人口のデータソース:
U.S. Census Bureau

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

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

コードビュー

JsFiddle で表示

クリップボードへコピー

HTML

                    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Crosshair Layer</title>

    <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 CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <!--CSS file specific for chart styling -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" />

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>

</head>
<body>
    <script type="text/javascript">


        $(function () {

            var data = [
                { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 },
                { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 },
                { "CountryName": "USA", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 },
                { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 },
                { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 }
            ];

            $("#chart").igDataChart({
                width: "100%",
                height: "400px",
                title: "国別人口",
                subtitle: "1995 年と 2005 年の人口の比較",
                dataSource: data,
                horizontalZoomable: true,
                verticalZoomable: true,
                windowResponse: "immediate",
                axes: [
                {
                    name: "xAxis",
                    type: "categoryX",
                    title: "国",
                    label: "CountryName",
                },
                {
                    name: "yAxis",
                    type: "numericY",
                    minimumValue: 0,
                    title: "人口 (百万人単位)",
                }
                ],
                series: [
                {
                    name: "2005Population",
                    type: "column",
                    isTransitionInEnabled: true,
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    valueMemberPath: "Pop2005"
                },
                {
                    name: "1995Population",
                    type: "column",
                    isTransitionInEnabled: true,
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    valueMemberPath: "Pop1995"
                },
                {
                    name: "crosshairLayer",
                    title: "crosshair",
                    type: "crosshairLayer",
                    useInterpolation: false,
                    transitionDuration: 0,
                    isAxisAnnotationEnabled: true,
                    xAxisAnnotationTextColor: "white",
                    yAxisAnnotationTextColor: "white",
                }]
            })

            $("#brush").on({
                change: function (e) {
                    var brushColor = $(this).val();
                    $("#chart").igDataChart("option", "series", [{ name: "crosshairLayer", brush: brushColor }]);
                }
            });

            $("#thicknessSlider").slider({
                min: 0,
                max: 10,
                value: 2,
                slide: function (event, ui) {
                    $("#chart").igDataChart("option", "series", [{ name: "crosshairLayer", thickness: ui.value }]);
                    $("#thicknessLabel").text(ui.value);
                }
            });

            $("#opacitySlider").slider({
                min: 0,
                max: 1,
                step: 0.1,
                value: 0.5,
                slide: function (event, ui) {
                    $("#chart").igDataChart("option", "series", [{ name: "crosshairLayer", opacity: ui.value }]);
                    $("#opacityLabel").text(ui.value);
                }
            });

            $("#transitionDurationSlider").slider({
                min: 0,
                max: 1000,
                value: 500,
                slide: function (event, ui) {
                    $("#chart").igDataChart("option", "series", [{ name: "crosshairLayer", transitionDuration: ui.value }]);
                    $("#transitionDurationLabel").text(ui.value);
                }
            });

            $("#useInterpolationCheckBox").click(function (e) {
                var useInterpolationResult = $("#useInterpolationCheckBox").is(":checked") ? true : false;
                $("#chart").igDataChart("option", "series", [{ name: "crosshairLayer", useInterpolation: useInterpolationResult }]);
            });

        });

    </script>

    <style type="text/css">
        .chart {
            position: relative;
            float: left;
            margin-right: 10px;
        }

        .optionsPane {
            position: relative;
            float: initial;
            width: 210px;
            margin: 6px 3px 6px 6px;
            display: inline-block;
            padding-top: 18px;
        }

        .optionsColumn {
            float: left;
            position: relative;
            margin: 2px;
            padding: 2px;
            display: inline-block;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            border: 1px solid #e0e0e0;
        }

        .slider {
            width: 160px;
            margin: 10px 10px 10px 6px;
            padding-right: 3px;
            padding-left: 3px;
            display: inline-block;
            float: left;
        }

        .selector {
            height: 30px;
            width: 175px;
            margin: 10px 10px 4px 6px;
            padding-right: 3px;
            padding-left: 3px;
            display: inline-block;
            float: left;
        }

        .labels {
            padding-right: 7px;
        }

        .values {
            padding-left: 7px;
            padding-right: 7px;
            width: 15px;
        }
    </style>

    <div>
        <div class="chart" id="chart"></div>
        <div>
            <div class="optionsPane">
                <div><b>カテゴリ項目ハイライト オプション</b></div>
                <div class="optionsColumn">

                    <div>
                        <label class="labels">ブラシ</label>
                        <select class="selector" id="brush">
                            <option value="gray">gray</option>
                            <option value="blue">blue</option>
                            <option value="red">red</option>
                            <option value="green">green</option>
                            <option value="orange">orange</option>
                            <option value="violet">violet</option>
                            <option value="indigo">indigo</option>
                            <option value="black">black</option>
                            <option value="white">white</option>
                        </select>
                    </div>

                    <div>
                        <label class="labels">ブラシの幅</label>
                        <label class="values" id="thicknessLabel">1</label>
                        <div class="slider" id="thicknessSlider"></div>
                    </div>

                    <div>
                        <label class="labels">不透明度</label>
                        <label class="values" id="opacityLabel">1</label>
                        <div class="slider" id="opacitySlider"></div>
                    </div>

                    <!--commented out because crosshair hides annotation after changing transition duration-->
                    <!--<div>
                        <label class="labels">トランジション期間</label>
                        <label class="values" id="transitionDurationLabel">500</label>
                        <div class="slider" id="transitionDurationSlider"></div>
                    </div>-->

                    <label class="labels">補間の使用</label>
                    <input class="checkbox" id="useInterpolationCheckBox" type="checkbox" checked />

                </div>

            </div>
        </div>

        <div class="USCensus-attribution">
            人口のデータ ソース:<br />
            <a href="http://www.census.gov/" target="_blank">U.S. Census Bureau</a>
        </div>
    </div>
</body>
</html>

Ignite UI for jQuery | サンプル

検索結果

データチャート - 十字ポインターレイヤー

コードビュー

Ignite UI for jQuery | サンプル

検索結果

データ チャート - 十字ポインター レイヤー

コード ビュー

データチャート - 十字ポインターレイヤー

コードビュー