製品版のみの機能

データチャート - チャートナビゲーション

このサンプルでは、jQuery チャートのさまざまなナビゲーション方法を紹介します。コントロールのコンテンツを組み込みキーボードナビゲーション (矢印キー、Page Up/Down、Home キー)、組み込みマウスナビゲーション (Shift キー + マウスドラッグ、マウススクロール、マウスダウン + マウスドラッグ)、概要と詳細ペイン、またはコードビハインドでコントロールのウィンドウ位置およびスケールプロパティによってパンやズームできます。

操作	垂直ズーム
デフォルト	ズームを有効にする
パニング修飾子	ズーム	1.0000
ドラッグ修飾子	水平ズーム
概要と詳細ペイン	ズームを有効にする
ペインを有効にする	ズーム	1.0000

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

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

コードビュー

JsFiddle で表示

クリップボードへコピー

HTML
データ

                    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Chart Navigation</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" />
    
    <!--CSS file specific for chart styling -->
    <link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.chart.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>
    <script type="text/javascript" src="/data-files/uk-france-population.js"></script>

    <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": "United States", "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: "600px",
                height: "400px",
                legend: { element: "lineLegend" },
                title: "国別人口",
                subtitle: "1995 年と 2005 年の人口の比較",
                overviewPlusDetailPaneVisibility: "visible",
                horizontalZoomable: true,
                verticalZoomable: true,
                dataSource: data,
                axes: [
                    {
                        name: "NameAxis",
                        type: "categoryX",
                        label: "CountryName"
                    },
                    {
                        name: "PopulationAxis",
                        type: "numericY", 
                        minimumValue: 0,
                        title: "人口 (百万人単位)",
                    }
                ],
                series: [
                   {
                       name: "Pop1995",
                       type: "column",
                       title: "1995",
                       xAxis: "NameAxis",
                       yAxis: "PopulationAxis",
                       valueMemberPath: "Pop1995",
                       isTransitionInEnabled: true,
                       isHighlightingEnabled: true,
                       thickness: 1
                   },
                   {
                        name: "Pop2005",
                        type: "column",
                        title: "2005",
                        xAxis: "NameAxis",
                        yAxis: "PopulationAxis",
                        valueMemberPath: "Pop2005",
                        isTransitionInEnabled: true,
                        isHighlightingEnabled: true,
                        thickness: 1
                    },
                    {
                        name: "Pop2015",
                        type: "column",
                        title: "2015",
                        xAxis: "NameAxis",
                        yAxis: "PopulationAxis",
                        valueMemberPath: "Pop2015",
                        isTransitionInEnabled: true,
                        isHighlightingEnabled: true,
                        thickness: 1
                    },
                    {
                        name: "Pop2025",
                        type: "column",
                        title: "2025",
                        xAxis: "NameAxis",
                        yAxis: "PopulationAxis",
                        valueMemberPath: "Pop2025",
                        isTransitionInEnabled: true,
                        isHighlightingEnabled: true,
                        thickness: 1
                    }
                    ]
            });

            $("#selectDefault").change(function (e) {
                $("#chart").igDataChart("option", "defaultInteraction", $(this).val());
            });

            $("#selectPanModifier").change(function (e) {
                $("#chart").igDataChart("option", "panModifier", $(this).val());
            });

            $("#selectDragModifier").change(function (e) {
                $("#chart").igDataChart("option", "dragModifier", $(this).val());
            });

            $("#enableVerticalZooming").click(function (e) {
                var verticalZoomingChecked = $(this).is(":checked");
                $("#chart").igDataChart("option", "verticalZoomable", verticalZoomingChecked);
                $("#verticalZoomSlider").slider("option", "disabled", !verticalZoomingChecked);
            });

            $("#enableHorizontalZooming").click(function (e) {
                var horizontalZoomingChecked = $(this).is(":checked");
                $("#chart").igDataChart("option", "horizontalZoomable", horizontalZoomingChecked);
                $("#horizontalZoomSlider").slider("option", "disabled", !horizontalZoomingChecked);
            });

            $("#enablePane").click(function (e) {
                var visibility = ($(this).is(":checked")) ? "visible" : "collapsed";
                $("#chart").igDataChart("option", "overviewPlusDetailPaneVisibility", visibility);
                $("#chart").igDataChart("styleUpdated");
            });

            $("#verticalZoomSlider").slider({
                min: 0.0001,
                max: 1,
                value: 1,
                step: 0.0001,
                slide: function (e, ui) {
                    if ($('#enableVerticalZooming').is(":checked"))
                        $("#chart").igDataChart("option", "windowScaleVertical", ui.value);
                }
            });

            $("#horizontalZoomSlider").slider({
                min: 0.0001,
                max: 1,
                value: 1,
                step: 0.0001,
                slide: function (e, ui) {
                    if ($('#enableHorizontalZooming').is(":checked"))
                        $("#chart").igDataChart("option", "windowScaleHorizontal", ui.value);
                }
            });
            
        });
    </script>

    <style type="text/css">
       
        .labelCol
        {
            width: 110px;
        }
        
       .slider
        {
            width: 80px;
            height: 10px;
            margin: 10px;
        }
        .selectionOptions
        {
            margin-bottom: 10px;   
        }

        td { vertical-align: top; }
        .chartElement {
            padding-bottom: 20px;
        }
    </style>
    

    <div class="selectionOptions" >
       <!-- シリーズ タイプ:&nbsp
        <select id="seriesType">
            <option value="area">エリア チャート</option>
            <option value="column">柱状チャート</option>
            <option value="line" selected="selected">折れ線チャート</option>
            <option value="splineArea">スプライン エリア チャート</option>
            <option value="spline">スプライン チャート</option>
            <option value="stepArea">ステップ エリア チャート</option>
            <option value="stepLine">ステップ折れ線チャート</option>
            <option value="waterfall">ウォーターフォール</option>
            <option value="point">ポイント</option>
        </select>-->
         <table class="optionsTable">
            <colgroup>
                <col class="labelCol" />
                <col />
                <col class="valueCol" />
                <col class="labelCol" />
                <col />
                <col class="valueCol" />
                 <col />
                <col class="valueCol" />
                   <col />
                <col class="valueCol" />
         </colgroup>

            <tr>
                <td colspan="2">
                    <b>操作</b>
                </td>
                <td></td>
                <td colspan="2">
                    <b>垂直ズーム</b>
                </td>
            </tr>

            <tr>
                <td>
                    デフォルト
                </td>
                <td>
                    <select id="selectDefault">
                        <option value="dragZoom" selected="selected">DragZoom</option>
                        <option value="dragPan">DragPan</option>
                        <option value="none">None</option>
                    </select>
                </td>
                <td></td>

                <td>
                    ズームを有効にする
                </td>
                <td>
                    <input type="checkbox" id="enableVerticalZooming" checked="checked" />
                </td>
            </tr>

            <tr>
                <td>
                    パニング修飾子
                </td>
                <td>
                    <select id="selectPanModifier">
                        <option value="control">Control</option>
                        <option value="alt">Alt</option>
                        <option value="shift" selected="selected">Shift</option>
                        <option value="none">None</option>
                    </select>
                </td>
                <td></td>

                <td>
                    ズーム
                </td>
                <td>
                    <div id="verticalZoomSlider" class="slider"></div>
                </td>
                <td>
                    <span id="verticalZoomLevel">1.0000</span>
                </td>
            </tr>

             <tr>
                <td>
                    ドラッグ修飾子
                </td>
                <td>
                    <select id="selectDragModifier">
                        <option value="control">Control</option>
                        <option value="alt">Alt</option>
                        <option value="shift">Shift</option>
                        <option value="none" selected="selected">None</option>
                    </select>
                </td>
                  <td></td>
              <td colspan="2">
                    <b>水平ズーム</b>
                </td>
          </tr>

            <tr>
                <td colspan="2">
                    <b>概要と詳細ペイン</b>
                </td>
               <td></td>
                <td>
                    ズームを有効にする
                </td>
                <td>
                    <input type="checkbox" id="enableHorizontalZooming" checked="checked" />
                </td>
              </tr>

            <tr>
                <td>
                    ペインを有効にする
                </td>
                <td>
                    <input type="checkbox" id="enablePane" checked="checked" />
                </td>
              <td></td>
                <td>
                    ズーム
                </td>
                <td>
                    <div id="horizontalZoomSlider" class="slider"></div>
                </td>
                <td>
                    <span id="horizontalZoomLevel">1.0000</span>
                </td>

            </tr>
             
        </table>
    </div>
    
    <table>
        <tr>
            <td id="chart" class="chartElement"/>      
            <td id="lineLegend" style="float: left"/>
        </tr>
    </table>
    
</body>
</html>

                    var data = [//{ "Date": "12/31/2011", "ukPopulation": 62.74, "francePopulation": 65.18 },
{ "Date": "12/31/2010", "ukPopulation": 62.26, "francePopulation": 64.82 },
//{ "Date": "12/31/2009", "ukPopulation": 61.81, "francePopulation": 64.48 },
//{ "Date": "12/31/2008", "ukPopulation": 61.39, "francePopulation": 64.13 },
//{ "Date": "12/31/2007", "ukPopulation": 60.98, "francePopulation": 63.78 },
//{ "Date": "12/31/2006", "ukPopulation": 60.59, "francePopulation": 63.39 },
{ "Date": "12/31/2005", "ukPopulation": 60.22, "francePopulation": 62.96 },
//{ "Date": "12/31/2004", "ukPopulation": 59.86, "francePopulation": 62.49 },
//{ "Date": "12/31/2003", "ukPopulation": 59.56, "francePopulation": 62.04 },
//{ "Date": "12/31/2002", "ukPopulation": 59.32, "francePopulation": 61.6 },
//{ "Date": "12/31/2001", "ukPopulation": 59.10, "francePopulation": 61.16 },
{ "Date": "12/31/2000", "ukPopulation": 58.89, "francePopulation": 60.72 },
//{ "Date": "12/31/1999", "ukPopulation": 58.68, "francePopulation": 60.32 },
//{ "Date": "12/31/1998", "ukPopulation": 58.48, "francePopulation": 60.01 },
//{ "Date": "12/31/1997", "ukPopulation": 58.31, "francePopulation": 59.8 },
//{ "Date": "12/31/1996", "ukPopulation": 58.16, "francePopulation": 59.59 },
{ "Date": "12/31/1995", "ukPopulation": 58.01, "francePopulation": 59.38 },
//{ "Date": "12/31/1994", "ukPopulation": 57.86, "francePopulation": 59.18 },
//{ "Date": "12/31/1993", "ukPopulation": 57.71, "francePopulation": 58.96 },
//{ "Date": "12/31/1992", "ukPopulation": 57.58, "francePopulation": 58.71 },
//{ "Date": "12/31/1991", "ukPopulation": 57.42, "francePopulation": 58.43 },
{ "Date": "12/31/1990", "ukPopulation": 57.24, "francePopulation": 58.14 },
//{ "Date": "12/31/1989", "ukPopulation": 57.07, "francePopulation": 57.83 },
//{ "Date": "12/31/1988", "ukPopulation": 56.92, "francePopulation": 57.49 },
//{ "Date": "12/31/1987", "ukPopulation": 56.80, "francePopulation": 57.17 },
//{ "Date": "12/31/1986", "ukPopulation": 56.68, "francePopulation": 56.87 },
{ "Date": "12/31/1985", "ukPopulation": 56.55, "francePopulation": 56.58 },
//{ "Date": "12/31/1984", "ukPopulation": 56.42, "francePopulation": 56.31 },
//{ "Date": "12/31/1983", "ukPopulation": 56.33, "francePopulation": 56.04 },
//{ "Date": "12/31/1982", "ukPopulation": 56.31, "francePopulation": 55.74 },
//{ "Date": "12/31/1981", "ukPopulation": 56.33, "francePopulation": 55.41 },
{ "Date": "12/31/1980", "ukPopulation": 56.31, "francePopulation": 55.1 },
//{ "Date": "12/31/1979", "ukPopulation": 56.24, "francePopulation": 54.82 },
//{ "Date": "12/31/1978", "ukPopulation": 56.19, "francePopulation": 54.58 },
//{ "Date": "12/31/1977", "ukPopulation": 56.19, "francePopulation": 54.34 },
//{ "Date": "12/31/1976", "ukPopulation": 56.21, "francePopulation": 54.1 },
{ "Date": "12/31/1975", "ukPopulation": 56.22, "francePopulation": 53.88 },
//{ "Date": "12/31/1974", "ukPopulation": 56.22, "francePopulation": 53.63 },
//{ "Date": "12/31/1973", "ukPopulation": 56.19, "francePopulation": 53.29 },
//{ "Date": "12/31/1972", "ukPopulation": 56.08, "francePopulation": 52.86 },
//{ "Date": "12/31/1971", "ukPopulation": 55.89, "francePopulation": 52.4 },
{ "Date": "12/31/1970", "ukPopulation": 55.66, "francePopulation": 51.9 },
//{ "Date": "12/31/1969", "ukPopulation": 55.44, "francePopulation": 51.43 },
//{ "Date": "12/31/1968", "ukPopulation": 55.21, "francePopulation": 51.01 },
//{ "Date": "12/31/1967", "ukPopulation": 54.94, "francePopulation": 50.63 },
//{ "Date": "12/31/1966", "ukPopulation": 54.64, "francePopulation": 50.22 },
{ "Date": "12/31/1965", "ukPopulation": 54.34, "francePopulation": 49.79 },
//{ "Date": "12/31/1964", "ukPopulation": 54.00, "francePopulation": 49.32 },
//{ "Date": "12/31/1963", "ukPopulation": 53.65, "francePopulation": 48.81 },
//{ "Date": "12/31/1962", "ukPopulation": 53.25, "francePopulation": 47.97 },
//{ "Date": "12/31/1961", "ukPopulation": 52.80, "francePopulation": 47.11 },
{ "Date": "12/31/1960", "ukPopulation": 52.40, "francePopulation": 46.61 }
];

Ignite UI for jQuery | サンプル

検索結果

データチャート - チャートナビゲーション

コードビュー

Ignite UI for jQuery | サンプル

検索結果

データ チャート - チャート ナビゲーション

コード ビュー

データチャート - チャートナビゲーション

コードビュー