製品版のみの機能

データチャート - 軸間隔

このサンプルは、チャートコントロールの数値とカテゴリ軸の主軸および副軸で間隔を設定する方法を紹介します。

XAxis Options

主グリッド線の表示:

主グリッド線の太さ: 1

主グリッド線の間隔: 1

副グリッド線の表示:

副グリッド線間隔の太さ: 1

副グリッド線間隔: 5

YAxis Options

主グリッド線の表示:

主グリッド線の太さ: 1

主グリッド線の間隔: 200

副グリッド線の表示:

副グリッド線間隔の太さ: 1

副グリッド線間隔: 10

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

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

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

コードビュー

JsFiddle で表示

クリップボードへコピー

HTML
データ

                    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <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>

    <title>DataChart Axis Intervals</title>  
</head>
<body>
    <script type="text/javascript" src="/data-files/us-fao-gross-production.js"></script>
    
    <script type="text/javascript">

        var transparentBrush = "rgba(0,0,0,0)";
        var brush;

        $(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: "450px",
                height: "400px",
                title: "国別人口",
                subtitle: "1995 年と 2005 年の人口の比較",
                dataSource: data,
                horizontalZoomable: true,
                verticalZoomable: true,
                windowResponse: "immediate",
                axes: [
                {
                    name: "xAxis",
                    type: "categoryX",
                    title: "国",
                    label: "CountryName",

                    majorStroke: "Green",
                    minorStroke: 'Red',
                    minorInterval: 2,
                    interval: 2,
                    majorStrokeThickness: 2,
                },
                {
                    name: "yAxis",
                    type: "numericY",
                    minimumValue: 0,
                    title: "人口 (百万人単位)",

                    majorStroke: "Green",
                    minorStroke: 'Red',
                    minorInterval: 100,
                    interval: 200,
                    majorStrokeThickness: 2,
                }
                ],
                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"
                }]
            })

        $("#XAxisMajorLinesCheckbox").click(function (e) {
            brush = $("#XAxisMajorLinesCheckbox").is(":checked") ? "Green" : transparentBrush;
            $("#chart").igDataChart("option", "axes", [{ name: "xAxis", majorStroke: brush }]);
            $("#chart").igDataChart("styleUpdated");
        });

        $("#XAxisMinorLinesCheckbox").click("change", function () {
            brush = ($(this).is(":checked")) ? "Red" : transparentBrush;
            $("#chart").igDataChart("option", "axes", [{ name: "xAxis", minorStroke: brush }]);
            $("#chart").igDataChart("styleUpdated");
        });

        $("#YAxisMajorLinesCheckbox").click("change", function () {
            brush = ($(this).is(":checked")) ? "Green" : transparentBrush;
            $("#chart").igDataChart("option", "axes", [{ name: "yAxis", majorStroke: brush }]);
            $("#chart").igDataChart("styleUpdated");
        });

        $("#YAxisMinorLinesCheckbox").click("change", function () {
            brush = ($(this).is(":checked")) ? "Red" : transparentBrush;
            $("#chart").igDataChart("option", "axes", [{ name: "yAxis", minorStroke: brush }]);
            $("#chart").igDataChart("styleUpdated");
        });

        $("#XAxisMajorGridlinesThicknessSlider").slider({
            min: 1,
            max: 10,
            value: 2,
            slide: function (e, ui) {
                $("#chart").igDataChart("option", "axes", [
                    { name: "xAxis", majorStrokeThickness: ui.value }
                ]);
                $("#XAxisMajorGridlinesThicknessLabel").text(ui.value);
            }
        });

        $("#XAxisMinorGridlinesThicknessSlider").slider({
            min: 1,
            max: 10,
            value: 1,
            slide: function (e, ui) {
                $("#chart").igDataChart("option", "axes", [
                    { name: "xAxis", minorStrokeThickness: ui.value }
                ]);
                $("#XAxisMinorGridlinesThicknessLabel").text(ui.value);
            }
        });

        $("#YAxisMajorGridlinesThicknessSlider").slider({
            min: 1,
            max: 10,
            value: 2,
            slide: function (e, ui) {
                $("#chart").igDataChart("option", "axes", [
                    { name: "yAxis", majorStrokeThickness: ui.value }
                ]);
                $("#YAxisMajorGridlinesThicknessLabel").text(ui.value);
            }
        });

        $("#YAxisMinorGridlinesThicknessSlider").slider({
            min: 1,
            max: 10,
            value: 1,
            slide: function (e, ui) {
                $("#chart").igDataChart("option", "axes", [
                    { name: "yAxis", minorStrokeThickness: ui.value }
                ]);
                $("#YAxisMinorGridlinesThicknessLabel").text(ui.value);
            }
        });

        $("#XAxisMajorGridlinesIntervalSlider").slider({
            min: 1,
            max: 5,
            value: 1,
            slide: function (e, ui) {
                $("#chart").igDataChart("option", "axes", [
                    { name: "xAxis", interval: ui.value }
                ]);
                $("#XAxisMajorGridlinesIntervalLabel").text(ui.value.toFixed(0));
            }
        });
        $("#YAxisMajorGridlinesIntervalSlider").slider({
            min: 100,
            max: 1000,
            value: 200,
            slide: function (e, ui) {
                $("#chart").igDataChart("option", "axes", [
                    { name: "yAxis", interval: ui.value }
                ]);
                $("#YAxisMajorGridlinesIntervalLabel").text(ui.value.toFixed(0));
            }
        });

        $("#XAxisMinorGridlinesIntervalSlider").slider({
            min: 1,
            max: 10,
            value: 50,
            slide: function (e, ui) {
                $("#chart").igDataChart("option", "axes", [
                    { name: "xAxis", minorInterval: (ui.value * .1) }
                ]);
                var num = ui.value * 0.1;
                $("#XAxisMinorGridlinesIntervalLabel").text(num.toFixed(2));
            }
        });
        $("#YAxisMinorGridlinesIntervalSlider").slider({
            min: 1,
            max: 20,
            value: 10,
            slide: function (e, ui) {
                $("#chart").igDataChart("option", "axes", [
                    { name: "yAxis", minorInterval: (ui.value * 10) }
                ]);
                $("#YAxisMinorGridlinesIntervalLabel").text(ui.value * 10);
            }
        });

        });
    </script>

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

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

        .optionsPane {
            position: relative;
            float: initial;
            width: 270px;
            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;
        }

        .labels {
            padding-right: 2px;
        }

        .values {
            padding-left: 2px;
            padding-right: 0px;
            width: 30px;
        }
         
    </style>

    <div class="chart" id="chart"></div>
    <div >
        <div class="optionsPane">
            <div><b>XAxis Options</b></div>
            <div class="optionsColumn">
                <label class="labels">主グリッド線の表示:</label>
                <input id="XAxisMajorLinesCheckbox" type="checkbox" class="chkBoxMargin" checked />
                <div>
                    <label class="labels">主グリッド線の太さ:</label>
                    <label id="XAxisMajorGridlinesThicknessLabel" class="values">1</label>
                    <div   id="XAxisMajorGridlinesThicknessSlider" class="slider"></div>
                </div>
                <div>
                    <label class="labels">主グリッド線の間隔:</label>
                    <label id="XAxisMajorGridlinesIntervalLabel" class="values">1</label>
                    <div   id="XAxisMajorGridlinesIntervalSlider" class="slider"></div>
                </div>
            </div>
            <div>
                <div class="optionsColumn">
                    <label class="labels">副グリッド線の表示:</label>
                    <input id="XAxisMinorLinesCheckbox" type="checkbox" class="chkBoxMargin" checked />
                    <div>
                        <label class="labels">副グリッド線間隔の太さ:</label>
                        <label id="XAxisMinorGridlinesThicknessLabel" class="values">1</label>
                        <div   id="XAxisMinorGridlinesThicknessSlider" class="slider"></div>
                    </div>
                    <div>
                        <label class="labels">副グリッド線間隔:</label>
                        <label id="XAxisMinorGridlinesIntervalLabel" class="values">5</label>
                        <div   id="XAxisMinorGridlinesIntervalSlider" class="slider"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="optionsPane">
            <div><b>YAxis Options</b></div>
            <div class="optionsColumn">
                <label class="labels">主グリッド線の表示:</label>
                <input id="YAxisMajorLinesCheckbox" type="checkbox" class="chkBoxMargin" checked />
                <div>
                    <label class="labels">主グリッド線の太さ:</label>
                    <label id="YAxisMajorGridlinesThicknessLabel" class="values">1</label>
                    <div   id="YAxisMajorGridlinesThicknessSlider" class="slider"></div>
                </div>
                <div>
                    <label class="labels">主グリッド線の間隔:</label>
                    <label id="YAxisMajorGridlinesIntervalLabel" class="values">200</label>
                    <div   id="YAxisMajorGridlinesIntervalSlider" class="slider"></div>
                </div>
            </div>
            <div class="optionsColumn">
                <label class="labels">副グリッド線の表示:</label>
                <input id="yAxisMinorLinesCheckbox" type="checkbox" class="chkBoxMargin" checked />
                <div>
                    <label class="labels">副グリッド線間隔の太さ:</label>
                    <label id="YAxisMinorGridlinesThicknessLabel" class="values">1</label>
                    <div   id="YAxisMinorGridlinesThicknessSlider" class="slider"></div>
                </div>
                <div>
                    <label class="labels">副グリッド線間隔:</label>
                    <label id="YAxisMinorGridlinesIntervalLabel" class="values">10</label>
                    <div   id="YAxisMinorGridlinesIntervalSlider" class="slider"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="USCensus-attribution">
        人口のデータ ソース:<br />
        <a href="http://www.census.gov/" target="_blank">U.S. Census Bureau</a>
    </div>
</body>
</html>

                    /*
United States Food and Agriculture gross production.

Data from: http://data.un.org/

Original source: http://faostat.fao.org/
*/

var agriculturalData = [{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2007, "Value_Unit": "1,000,000 Int. $", "Value": 184698, "Population_Unit": "1,000,000 People", "Population": 302 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2006, "Value_Unit": "1,000,000 Int. $", "Value": 176803, "Population_Unit": "1,000,000 People", "Population": 299 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2005, "Value_Unit": "1,000,000 Int. $", "Value": 181432, "Population_Unit": "1,000,000 People", "Population": 296 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2004, "Value_Unit": "1,000,000 Int. $", "Value": 183519, "Population_Unit": "1,000,000 People", "Population": 294 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2003, "Value_Unit": "1,000,000 Int. $", "Value": 172458, "Population_Unit": "1,000,000 People", "Population": 291 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2002, "Value_Unit": "1,000,000 Int. $", "Value": 167494, "Population_Unit": "1,000,000 People", "Population": 288 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2001, "Value_Unit": "1,000,000 Int. $", "Value": 170755, "Population_Unit": "1,000,000 People", "Population": 285 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 2000, "Value_Unit": "1,000,000 Int. $", "Value": 173640, "Population_Unit": "1,000,000 People", "Population": 282 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1999, "Value_Unit": "1,000,000 Int. $", "Value": 170083, "Population_Unit": "1,000,000 People", "Population": 279 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1998, "Value_Unit": "1,000,000 Int. $", "Value": 167311, "Population_Unit": "1,000,000 People", "Population": 275 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1997, "Value_Unit": "1,000,000 Int. $", "Value": 167072, "Population_Unit": "1,000,000 People", "Population": 272 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1996, "Value_Unit": "1,000,000 Int. $", "Value": 162066, "Population_Unit": "1,000,000 People", "Population": 269 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1995, "Value_Unit": "1,000,000 Int. $", "Value": 152325, "Population_Unit": "1,000,000 People", "Population": 266 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1994, "Value_Unit": "1,000,000 Int. $", "Value": 164433, "Population_Unit": "1,000,000 People", "Population": 263 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1993, "Value_Unit": "1,000,000 Int. $", "Value": 142796, "Population_Unit": "1,000,000 People", "Population": 260 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1992, "Value_Unit": "1,000,000 Int. $", "Value": 155467, "Population_Unit": "1,000,000 People", "Population": 258 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1991, "Value_Unit": "1,000,000 Int. $", "Value": 143249, "Population_Unit": "1,000,000 People", "Population": 255 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1990, "Value_Unit": "1,000,000 Int. $", "Value": 144644, "Population_Unit": "1,000,000 People", "Population": 253 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1989, "Value_Unit": "1,000,000 Int. $", "Value": 138218, "Population_Unit": "1,000,000 People", "Population": 250 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1988, "Value_Unit": "1,000,000 Int. $", "Value": 126910, "Population_Unit": "1,000,000 People", "Population": 248 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1987, "Value_Unit": "1,000,000 Int. $", "Value": 136752, "Population_Unit": "1,000,000 People", "Population": 245 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1986, "Value_Unit": "1,000,000 Int. $", "Value": 136708, "Population_Unit": "1,000,000 People", "Population": 243 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1985, "Value_Unit": "1,000,000 Int. $", "Value": 143144, "Population_Unit": "1,000,000 People", "Population": 241 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1984, "Value_Unit": "1,000,000 Int. $", "Value": 136529, "Population_Unit": "1,000,000 People", "Population": 238 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1983, "Value_Unit": "1,000,000 Int. $", "Value": 119197, "Population_Unit": "1,000,000 People", "Population": 236 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1982, "Value_Unit": "1,000,000 Int. $", "Value": 139500, "Population_Unit": "1,000,000 People", "Population": 234 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1981, "Value_Unit": "1,000,000 Int. $", "Value": 139390, "Population_Unit": "1,000,000 People", "Population": 232 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1980, "Value_Unit": "1,000,000 Int. $", "Value": 127118, "Population_Unit": "1,000,000 People", "Population": 229 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1979, "Value_Unit": "1,000,000 Int. $", "Value": 133091, "Population_Unit": "1,000,000 People", "Population": 227 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1978, "Value_Unit": "1,000,000 Int. $", "Value": 126211, "Population_Unit": "1,000,000 People", "Population": 225 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1977, "Value_Unit": "1,000,000 Int. $", "Value": 126192, "Population_Unit": "1,000,000 People", "Population": 223 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1976, "Value_Unit": "1,000,000 Int. $", "Value": 120877, "Population_Unit": "1,000,000 People", "Population": 221 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1975, "Value_Unit": "1,000,000 Int. $", "Value": 117511, "Population_Unit": "1,000,000 People", "Population": 219 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1974, "Value_Unit": "1,000,000 Int. $", "Value": 110119, "Population_Unit": "1,000,000 People", "Population": 217 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1973, "Value_Unit": "1,000,000 Int. $", "Value": 113008, "Population_Unit": "1,000,000 People", "Population": 215 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1972, "Value_Unit": "1,000,000 Int. $", "Value": 111439, "Population_Unit": "1,000,000 People", "Population": 213 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1971, "Value_Unit": "1,000,000 Int. $", "Value": 111234, "Population_Unit": "1,000,000 People", "Population": 211 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1970, "Value_Unit": "1,000,000 Int. $", "Value": 102786, "Population_Unit": "1,000,000 People", "Population": 209 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1969, "Value_Unit": "1,000,000 Int. $", "Value": 104285, "Population_Unit": "1,000,000 People", "Population": 207 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1968, "Value_Unit": "1,000,000 Int. $", "Value": 103420, "Population_Unit": "1,000,000 People", "Population": 205 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1967, "Value_Unit": "1,000,000 Int. $", "Value": 101177, "Population_Unit": "1,000,000 People", "Population": 203 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1966, "Value_Unit": "1,000,000 Int. $", "Value": 97277, "Population_Unit": "1,000,000 People", "Population": 201 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1965, "Value_Unit": "1,000,000 Int. $", "Value": 97704, "Population_Unit": "1,000,000 People", "Population": 199 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1964, "Value_Unit": "1,000,000 Int. $", "Value": 94323, "Population_Unit": "1,000,000 People", "Population": 197 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1963, "Value_Unit": "1,000,000 Int. $", "Value": 93700, "Population_Unit": "1,000,000 People", "Population": 194 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1962, "Value_Unit": "1,000,000 Int. $", "Value": 90275, "Population_Unit": "1,000,000 People", "Population": 191 },
{ "Country": "United States of America", "Element": "Gross Production 1999-2001 (1000 I$)", "Year": 1961, "Value_Unit": "1,000,000 Int. $", "Value": 89816, "Population_Unit": "1,000,000 People", "Population": 189 }];

Ignite UI for jQuery | サンプル

検索結果

データチャート - 軸間隔

コードビュー

Ignite UI for jQuery | サンプル

検索結果

データ チャート - 軸間隔

コード ビュー

データチャート - 軸間隔

コードビュー