製品版のみの機能

シェープチャート - 概要

igShapeChart は、igDataChart を簡素化した HTML5 コントロールです。チャートは、シンプルで直感的な API を使用したカテゴリデータの表示を簡単に設定できます。データ (データオブジェクトの配列またはデータオブジェクトの配列の配列) をバインドすると後の処理はチャートがすべて行います。このチャートには多数の機能が含まれます。

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

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

コードビュー

JsFiddle で表示

クリップボードへコピー

                    var scatterData = [
            { "X": 20, "Y": 20, "R": 10, "Value": 10 },
            { "X": 20, "Y": 80, "R": 30, "Value": 10 },
            { "X": 80, "Y": 80, "R": 30, "Value": 90 },
            { "X": 80, "Y": 20, "R": 10, "Value": 90 }
        ];  
        var shapeData = [ [GetRectShapes(20, 20)] ];

        var highDensityData = GetDensityData(20, 20);

            // CODE SNIPPET
            $("#pointChart").igShapeChart({
                chartType: "point",
                dataSource: scatterData,
                title: "ポイント", 
            });

            $("#bubbleChart").igShapeChart({
                chartType: "bubble",
                dataSource: scatterData, 
                title: "バブル", 
            });

            $("#areaChart").igShapeChart({
                chartType: "area",
                dataSource: scatterData, 
                title: "エリア", 
            });

            $("#polygonChart").igShapeChart({
                chartType: "polygon",
                dataSource: shapeData, 
                title: "多角形", 
            });

            $("#lineChart").igShapeChart({
                chartType: "line",
                dataSource: scatterData, 
                title: "折れ線", 
            });

            $("#highDensityChart").igShapeChart({
                chartType: "highDensity",
                dataSource: highDensityData, 
                title: "高密度", 
            });

            $("#contourChart").igShapeChart({
                chartType: "contour",
                dataSource: scatterData, 
                title: "等高線", 
            });

            $("#polylineChart").igShapeChart({
                chartType: "polyline",
                dataSource: shapeData, 
                title: "ポリライン", 
            });

            $("#splineChart").igShapeChart({
                chartType: "spline",
                dataSource: scatterData, 
                title: "スプライン", 
            }); 
            // CODE SNIPPET

            StyleChart("#pointChart");
            StyleChart("#bubbleChart");
            StyleChart("#areaChart");
            StyleChart("#splineChart");
            StyleChart("#lineChart");
            StyleChart("#highDensityChart");
            StyleChart("#contourChart");
            StyleChart("#polylineChart");
            StyleChart("#polygonChart");
        });

        function GetRectShapes(x, y) {
            x = x || 0;
            y = y || 0;
            var shapes = [
                { "value": 5, "radius": 5, "x": x + 10, "y": y + 10, "points": [GetRectPoints(x, y)] },
                { "value": 50, "radius": 50, "x": x + 60, "y": y + 10, "points": [GetRectPoints(x, y + 40)] }];
            return shapes;
        }

        function GetRectPoints(x, y) {
            return [
                { "x": x, "y": y },
                { "x": x + 60, "y": y },
                { "x": x + 60, "y": y + 20 },
                { "x": x, "y": y + 20 },
                { "x": x, "y": y }];
        }

        function GetDensityData(x, y) {
            x = x || 0;
            y = y || 0;
            var density = [];

            var points = [
                { "x": x, "y": y , },
                { "x": x + 60, "y": y, },
                { "x": x, "y": y + 60, },
                { "x": x + 60, "y": y + 60 }];

            var range1 = 5;
            var range2 = 2.5;
            for (i = 0; i < points.length; i++) {
                for (p = 0; p < 500; p++) {
                    var dx = points[i].x + (GetRandom(-range1, range1) * Math.random());
                    var dy = points[i].y + (GetRandom(-range1, range1) * Math.random());
                    density.push({ "x": dx, "y": dy, });
                }
                for (p = 0; p < 100; p++) {
                    var dx = points[i].x + (GetRandom(-range2, range2) * Math.random());
                    var dy = points[i].y + (GetRandom(-range2, range2) * Math.random());
                    density.push({ "x": dx, "y": dy, });
                }
            }
            return density;
        }

        function GetRandom(min, max) {
            return Math.random() * (max - min) + min;
        }


        function StyleChart(chartID) {

            $(chartID).igShapeChart({
                width: "33%",
                height: "200px",
                xAxisInterval: 20,
                yAxisInterval: 20,
                xAxisMinimumValue: 0,
                yAxisMinimumValue: 0,
                xAxisMaximumValue: 100,
                yAxisMaximumValue: 100,
                xAxisTickLength: 5,
                yAxisTickLength: 5,
                xAxisTickStrokeThickness: 1,
                yAxisTickStrokeThickness: 1,
                xAxisTickStroke: "gray",
                yAxisTickStroke: "gray",
                thickness: 2,
                markerTypes: [ "circle" ],
                isHorizontalZoomEnabled: true,
                isVerticalZoomEnabled: true,
           
        }

                    <div id="pointChart" class="chart"></div>
    <div id="bubbleChart" class="chart"></div>
    <div id="areaChart" class="chart"></div>
    <div id="splineChart" class="chart"></div>
    <div id="lineChart" class="chart"></div>
    <div id="highDensityChart" class="chart"></div>
    <div id="contourChart" class="chart"></div>
    <div id="polylineChart" class="chart"></div>
    <div id="polygonChart" class="chart"></div>

                    .chart {
    display: inline-block;
}

                    <!DOCTYPE html>
<html>

<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/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" />

    <!-- 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>

    <title>ShapeChart Types</title>

</head>

<body>

    <style>
        .chart {
            display: inline-block;
        }
    </style>

    <div id="pointChart" class="chart"></div>
    <div id="bubbleChart" class="chart"></div>
    <div id="areaChart" class="chart"></div>
    <div id="splineChart" class="chart"></div>
    <div id="lineChart" class="chart"></div>
    <div id="highDensityChart" class="chart"></div>
    <div id="contourChart" class="chart"></div>
    <div id="polylineChart" class="chart"></div>
    <div id="polygonChart" class="chart"></div>

    <script> 
        var scatterData = [
            { "X": 20, "Y": 20, "R": 10, "Value": 10 },
            { "X": 20, "Y": 80, "R": 30, "Value": 10 },
            { "X": 80, "Y": 80, "R": 30, "Value": 90 },
            { "X": 80, "Y": 20, "R": 10, "Value": 90 }
        ];  
        var shapeData = [ [GetRectShapes(20, 20)] ];

        var highDensityData = GetDensityData(20, 20);

        $(function () {
            // CODE SNIPPET
            $("#pointChart").igShapeChart({
                chartType: "point",
                dataSource: scatterData,
                title: "ポイント", 
            });

            $("#bubbleChart").igShapeChart({
                chartType: "bubble",
                dataSource: scatterData, 
                title: "バブル", 
            });

            $("#areaChart").igShapeChart({
                chartType: "area",
                dataSource: scatterData, 
                title: "エリア", 
            });

            $("#polygonChart").igShapeChart({
                chartType: "polygon",
                dataSource: shapeData, 
                title: "多角形", 
            });

            $("#lineChart").igShapeChart({
                chartType: "line",
                dataSource: scatterData, 
                title: "折れ線", 
            });

            $("#highDensityChart").igShapeChart({
                chartType: "highDensity",
                dataSource: highDensityData, 
                title: "高密度", 
            });

            $("#contourChart").igShapeChart({
                chartType: "contour",
                dataSource: scatterData, 
                title: "等高線", 
            });

            $("#polylineChart").igShapeChart({
                chartType: "polyline",
                dataSource: shapeData, 
                title: "ポリライン", 
            });

            $("#splineChart").igShapeChart({
                chartType: "spline",
                dataSource: scatterData, 
                title: "スプライン", 
            }); 
            // CODE SNIPPET

            StyleChart("#pointChart");
            StyleChart("#bubbleChart");
            StyleChart("#areaChart");
            StyleChart("#splineChart");
            StyleChart("#lineChart");
            StyleChart("#highDensityChart");
            StyleChart("#contourChart");
            StyleChart("#polylineChart");
            StyleChart("#polygonChart");
        });

        function GetRectShapes(x, y) {
            x = x || 0;
            y = y || 0;
            var shapes = [
                { "value": 5, "radius": 5, "x": x + 10, "y": y + 10, "points": [GetRectPoints(x, y)] },
                { "value": 50, "radius": 50, "x": x + 60, "y": y + 10, "points": [GetRectPoints(x, y + 40)] }];
            return shapes;
        }

        function GetRectPoints(x, y) {
            return [
                { "x": x, "y": y },
                { "x": x + 60, "y": y },
                { "x": x + 60, "y": y + 20 },
                { "x": x, "y": y + 20 },
                { "x": x, "y": y }];
        }

        function GetDensityData(x, y) {
            x = x || 0;
            y = y || 0;
            var density = [];

            var points = [
                { "x": x, "y": y , },
                { "x": x + 60, "y": y, },
                { "x": x, "y": y + 60, },
                { "x": x + 60, "y": y + 60 }];

            var range1 = 5;
            var range2 = 2.5;
            for (i = 0; i < points.length; i++) {
                for (p = 0; p < 500; p++) {
                    var dx = points[i].x + (GetRandom(-range1, range1) * Math.random());
                    var dy = points[i].y + (GetRandom(-range1, range1) * Math.random());
                    density.push({ "x": dx, "y": dy, });
                }
                for (p = 0; p < 100; p++) {
                    var dx = points[i].x + (GetRandom(-range2, range2) * Math.random());
                    var dy = points[i].y + (GetRandom(-range2, range2) * Math.random());
                    density.push({ "x": dx, "y": dy, });
                }
            }
            return density;
        }

        function GetRandom(min, max) {
            return Math.random() * (max - min) + min;
        }


        function StyleChart(chartID) {

            $(chartID).igShapeChart({
                width: "33%",
                height: "200px",
                xAxisInterval: 20,
                yAxisInterval: 20,
                xAxisMinimumValue: 0,
                yAxisMinimumValue: 0,
                xAxisMaximumValue: 100,
                yAxisMaximumValue: 100,
                xAxisTickLength: 5,
                yAxisTickLength: 5,
                xAxisTickStrokeThickness: 1,
                yAxisTickStrokeThickness: 1,
                xAxisTickStroke: "gray",
                yAxisTickStroke: "gray",
                thickness: 2,
                markerTypes: [ "circle" ],
                isHorizontalZoomEnabled: true,
                isVerticalZoomEnabled: true,
            });
        }

    </script>

</body>

</html>

Ignite UI for jQuery | サンプル

検索結果

シェープチャート - 概要

コードビュー

Ignite UI for jQuery | サンプル

検索結果

シェープ チャート - 概要

コード ビュー

シェープチャート - 概要

コードビュー