OSS で利用できる機能

レイアウトマネージャー - 概要

igLayoutManager は、ページにさまざまなレイアウトモードを実装する jQuery UI に基づいたウィジェットです。

前回の速度

先週の走行距離

49 km

先週の合計カロリー

3675 cal

先月の合計距離

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

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

モードは、フローレイアウト、垂直レイアウト、および左/右/フッター/ヘッダー/中央領域に分割する境界線レイアウトを含みます。また、レスポンシブおよび流動列レイアウトは 12 列のレイアウトグリッドに基づきます。項目の位置を設定し、行スパンおよび列スパンを変更可能なグリッドレイアウトもサポートされています。サンプルをすべて表示するには、メニューを参照してください。

コードビュー

JsFiddle で表示

クリップボードへコピー

                    $('#layout').igLayoutManager({
    layoutMode: "grid",
    width: "100%",
    height: "500px",
    gridLayout: {
        cols: 3,
        rows: 3
    },
    items: [
        {
            rowSpan: 2,
            colSpan: 2,
            colIndex: 0,
            rowIndex: 0
        },
        {
            rowSpan: 1,
            colSpan: 1,
            rowIndex: 0,
            colIndex: 2
        },
        {
            rowSpan: 1,
            colSpan: 1,
            rowIndex: 1,
            colIndex: 2
        },
        {
            rowSpan: 1,
            colSpan: 3,
            colIndex: 0,
            rowIndex: 2
        }
    ]
});            

$("#speedLineChart").igDataChart({
    width: "100%",
    height: "283px",
    dataSource: runningSpeedData,
    axes: [
        {
            name: "kmAxis",
            type: "categoryX",
            label: "km"
        },
        {
            name: "averageSpeedAxis",
            type: "numericY",
            minimumValue: 8,
            maximumValue: 15,
            title: "スピード (km/h)",
        }
    ],
    series: [
        {
            name: "speed",
            type: "spline",
            title: "speed",
            xAxis: "kmAxis",
            yAxis: "averageSpeedAxis",
            valueMemberPath: "speedPerHour",
            isTransitionInEnabled: true,
            isHighlightingEnabled: true,
            brush: "#f60",
            thickness: 3
        }
    ]
});

$("#totalKmBarChart").igDataChart({
    width: "100%",
    height: "117px",
    dataSource: lastMonthKmRun,
    outlines: ["rgba(0,0,0,0)"],
    axes: [{
        name: "monthDayAxis",
        type: "categoryX",
        label: "monthDay",
        interval: 1
    },
    {
        name: "kmRunAxis",
        type: "numericY",
        title: "km"
    }],
    series: [{
        name: "lastMonth",
        type: "column",
        isHighlightingEnabled: true,
        isTransitionInEnabled: true,
        xAxis: "monthDayAxis",
        yAxis: "kmRunAxis",
        valueMemberPath: "kmRun",
        brush: "#f60",
        thickness: 0,
        radius: 0
    }]
});

                    <div id="layout-wrapper">
    <div id="layout">
        <div>
            <div class="box">
                <div class="box-title">前回の速度</div>
                <div id="speedLineChart" class="chartElement"></div>
            </div>
        </div>
        <div>
            <div class="box">
                <div class="box-title">先週の走行距離</div>
                <div class="box-body-big-text">49 km</div>
            </div>
        </div>
        <div>
            <div class="box">
                <div class="box-title">先週の合計カロリー</div>
                <div class="box-body-big-text">3675 cal</div>
            </div>
        </div>
        <div>
            <div class="box">
                <div class="box-title">先月の合計距離</div>
                <div id="totalKmBarChart" class="chartElement"></div>
            </div>
        </div>
    </div>
</div>

                    ul {
    list-style-type: none; 
}

#layout {
    position: relative;
}        

.ig-layout-item {
    padding: 5px;
}

    .ig-layout-item > div {
        position: absolute;
        height: auto;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        margin: 5px;
    }  

.box {
    background-color: #fff;
    border: 1px solid #888;
    color: grey;
}

.box-title {
    color:#fff;
    background-color:#888;
    font-size: 16px;
    padding: 6px 0 10px 10px;
}

.box table td {
    padding: 0;
}

.box-body-big-text {
    font-size: 60px;
    margin-top: 15px;
    text-align: center;
    color: #f60;
}

       @media all and (max-width: 910px) {
    .box-title {
        font-size: 14px;
    }

    .box-body-big-text {
        font-size: 49px;
        margin-top: 24px;
    }
}

@media all and (max-width: 740px) {
    .box-title {
        font-size: 12px;
    }
    .box-body-big-text {
        font-size: 38px;
        margin-top: 34px;
    }
}

@media all and (max-width: 570px) {
    .box-title {
        font-size: 10px;
    }
    .box-body-big-text {
        font-size: 20px;
        margin-top: 47px;
    }
}

@media all and (max-width: 360px) {
    .box-title {
        font-size: 10px;
    }
    .box-body-big-text {
        font-size: 17px;
        margin-top: 45px;
    }
}

                    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ignite UI for jQuery Layout Manager - grid layout with absolute positioning</title>
    <!-- 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/modules/infragistics.ui.layout.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <!-- Modernizr/jQuery/jQuery UI -->
    <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/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>

    <script src="/data-files/last-month-run-km.js"></script>
    <script src="/data-files/running-speed.js"></script>

    <style type="text/css">
        ul {
            list-style-type: none; 
        }

        #layout {
            position: relative;
        }        

        .ig-layout-item {
            padding: 5px;
        }

            .ig-layout-item > div {
                position: absolute;
                height: auto;
                bottom: 0;
                top: 0;
                left: 0;
                right: 0;
                margin: 5px;
            }  

        .box {
            background-color: #fff;
            border: 1px solid #888;
            color: grey;
        }

        .box-title {
            color:#fff;
            background-color:#888;
            font-size: 16px;
            padding: 6px 0 10px 10px;
        }

        .box table td {
            padding: 0;
        }
        
        .box-body-big-text {
            font-size: 60px;
            margin-top: 15px;
            text-align: center;
            color: #f60;
        }

       @media all and (max-width: 910px) {
            .box-title {
                font-size: 14px;
            }

            .box-body-big-text {
                font-size: 49px;
                margin-top: 24px;
            }
        }

        @media all and (max-width: 740px) {
            .box-title {
                font-size: 12px;
            }
            .box-body-big-text {
                font-size: 38px;
                margin-top: 34px;
            }
        }

        @media all and (max-width: 570px) {
            .box-title {
                font-size: 10px;
            }
            .box-body-big-text {
                font-size: 20px;
                margin-top: 47px;
            }
        }

        @media all and (max-width: 360px) {
            .box-title {
                font-size: 10px;
            }
            .box-body-big-text {
                font-size: 17px;
                margin-top: 45px;
            }
        }
    </style>
</head>
<body>
    <div id="layout-wrapper">
        <div id="layout">
            <div>
                <div class="box">
                    <div class="box-title">前回の速度</div>
                    <div id="speedLineChart" class="chartElement"></div>
                </div>
            </div>
            <div>
                <div class="box">
                    <div class="box-title">先週の走行距離</div>
                    <div class="box-body-big-text">49 km</div>
                </div>
            </div>
            <div>
                <div class="box">
                    <div class="box-title">先週の合計カロリー</div>
                    <div class="box-body-big-text">3675 cal</div>
                </div>
            </div>
            <div>
                <div class="box">
                    <div class="box-title">先月の合計距離</div>
                    <div id="totalKmBarChart" class="chartElement"></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#layout').igLayoutManager({
                layoutMode: "grid",
                width: "100%",
                height: "500px",
                gridLayout: {
                    cols: 3,
                    rows: 3
                },
                items: [
                    {
                        rowSpan: 2,
                        colSpan: 2,
                        colIndex: 0,
                        rowIndex: 0
                    },
                    {
                        rowSpan: 1,
                        colSpan: 1,
                        rowIndex: 0,
                        colIndex: 2
                    },
                    {
                        rowSpan: 1,
                        colSpan: 1,
                        rowIndex: 1,
                        colIndex: 2
                    },
                    {
                        rowSpan: 1,
                        colSpan: 3,
                        colIndex: 0,
                        rowIndex: 2
                    }
                ]
            });            

            $("#speedLineChart").igDataChart({
                width: "100%",
                height: "283px",
                dataSource: runningSpeedData,
                axes: [
                    {
                        name: "kmAxis",
                        type: "categoryX",
                        label: "km"
                    },
                    {
                        name: "averageSpeedAxis",
                        type: "numericY",
                        minimumValue: 8,
                        maximumValue: 15,
                        title: "スピード (km/h)",
                    }
                ],
                series: [
                    {
                        name: "speed",
                        type: "spline",
                        title: "speed",
                        xAxis: "kmAxis",
                        yAxis: "averageSpeedAxis",
                        valueMemberPath: "speedPerHour",
                        isTransitionInEnabled: true,
                        isHighlightingEnabled: true,
                        brush: "#f60",
                        thickness: 3
                    }
                ]
            });

            $("#totalKmBarChart").igDataChart({
                width: "100%",
                height: "117px",
                dataSource: lastMonthKmRun,
                outlines: ["rgba(0,0,0,0)"],
                axes: [{
                    name: "monthDayAxis",
                    type: "categoryX",
                    label: "monthDay",
                    interval: 1
                },
                {
                    name: "kmRunAxis",
                    type: "numericY",
                    title: "km"
                }],
                series: [{
                    name: "lastMonth",
                    type: "column",
                    isHighlightingEnabled: true,
                    isTransitionInEnabled: true,
                    xAxis: "monthDayAxis",
                    yAxis: "kmRunAxis",
                    valueMemberPath: "kmRun",
                    brush: "#f60",
                    thickness: 0,
                    radius: 0
                }]
            });
        });
    </script>
</body>
</html>

                    var lastMonthKmRun = [
    { "monthDay": 1, "kmRun": 5 },
    { "monthDay": 2, "kmRun": 0 },
    { "monthDay": 3, "kmRun": 10 },
    { "monthDay": 4, "kmRun": 11 },
    { "monthDay": 5, "kmRun": 0 },
    { "monthDay": 6, "kmRun": 0 },
    { "monthDay": 7, "kmRun": 5 },

    { "monthDay": 8, "kmRun": 0 },
    { "monthDay": 9, "kmRun": 7 },
    { "monthDay": 10, "kmRun": 7 },
    { "monthDay": 11, "kmRun": 0 },
    { "monthDay": 12, "kmRun": 14 },
    { "monthDay": 13, "kmRun": 0 },
    { "monthDay": 14, "kmRun": 15 },

    { "monthDay": 15, "kmRun": 0 },
    { "monthDay": 16, "kmRun": 9 },
    { "monthDay": 17, "kmRun": 0 },
    { "monthDay": 18, "kmRun": 13 },
    { "monthDay": 19, "kmRun": 16 },
    { "monthDay": 20, "kmRun": 0 },
    { "monthDay": 21, "kmRun": 15 },

    { "monthDay": 22, "kmRun": 10 },
    { "monthDay": 23, "kmRun": 0 },
    { "monthDay": 24, "kmRun": 0 },
    { "monthDay": 25, "kmRun": 9 },
    { "monthDay": 26, "kmRun": 20 },
    { "monthDay": 27, "kmRun": 0 },
    { "monthDay": 28, "kmRun": 10 }
];

             
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
    <style>
        ul {
            list-style-type: none; 
        }

        #layout {
            position: relative;
        }        

        .ig-layout-item {
            padding: 5px;
        }

            .ig-layout-item > div {
                position: absolute;
                height: auto;
                bottom: 0;
                top: 0;
                left: 0;
                right: 0;
                margin: 5px;
            }  

        .box {
            background-color: #fff;
            border: 1px solid #888;
            color: grey;
        }

        .box-title {
            color:#fff;
            background-color:#888;
            font-size: 16px;
            padding: 6px 0 10px 10px;
        }

        .box table td {
            padding: 0;
        }
        
        .box-body-big-text {
            font-size: 60px;
            margin-top: 15px;
            text-align: center;
            color: #f60;
        }

       @media all and (max-width: 910px) {
            .box-title {
                font-size: 14px;
            }

            .box-body-big-text {
                font-size: 49px;
                margin-top: 24px;
            }
        }

        @media all and (max-width: 740px) {
            .box-title {
                font-size: 12px;
            }
            .box-body-big-text {
                font-size: 38px;
                margin-top: 34px;
            }
        }

        @media all and (max-width: 570px) {
            .box-title {
                font-size: 10px;
            }
            .box-body-big-text {
                font-size: 20px;
                margin-top: 47px;
            }
        }

        @media all and (max-width: 360px) {
            .box-title {
                font-size: 10px;
            }
            .box-body-big-text {
                font-size: 17px;
                margin-top: 45px;
            }
        }
    </style>
</head>
<body>

    <my-app>Loading...</my-app>

    <!-- 1. Load libraries -->
    <script src="/js/modernizr.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
    <script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="/igniteui/js/infragistics.core.js"></script>
    <script src="/igniteui/js/infragistics.lob.js"></script>
    <script src="/igniteui/js/infragistics.dv.js"></script>
    <script>
        System.config( {
            paths: {
                'npm:': 'https://unpkg.com/'
            },
            map: {
                '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
                '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
                '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
                '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
                '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
                '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
                '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
                '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
                'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
                'rxjs': 'npm:rxjs'
            },
            // packages tells the System loader how to load when no filename and/or no extension
            packages: {
                rxjs: {
                    defaultExtension: 'js'
                },
                'igniteui-angular-wrappers': {
                    main: './index.js',
                    defaultExtension: 'js'
                }
            },
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true }
        } );

        System.import( 'grid-layout.ts' ).then( null, console.error.bind( console ) );
    </script>
</body>
</html>

             
import { Component, NgModule, OnInit } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { IgDataChartComponent, IgLayoutManagerComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic }	from '@angular/platform-browser-dynamic';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
import 'rxjs/add/operator/map';

declare var jQuery: any;

@Component({
    selector: 'my-app',
    template: `
        <div id="layout-wrapper">
            <ig-layout-manager widgetId="layout" [(options)]="layoutConfig">
                <div>
                    <div class="box">
                        <div class="box-title">前回の速度</div>
                        <ig-data-chart widgetID="speedLineChart" class="chartElement" [(options)]="speedChartConfig"></ig-data-chart>
                    </div>
                </div>
                <div>
                    <div class="box">
                        <div class="box-title">先週の走行距離</div>
                        <div class="box-body-big-text">49 km</div>
                    </div>
                </div>
                <div>
                    <div class="box">
                        <div class="box-title">先週の合計カロリー</div>
                        <div class="box-body-big-text">3675 cal</div>
                    </div>
                </div>
                <div>
                    <div class="box">
                        <div class="box-title">先月の合計距離</div>
                        <ig-data-chart widgetId="totalKmBarChart" class="chartElement" [(options)]="totalKmChartConfig"></ig-data-chart>
                    </div>
                </div>
            </ig-layout-manager>
        </div>
    `
})
export class AppComponent implements OnInit {
    
    private lastMonthRunUrl: string = "/data-files/last-month-run-km.js";
    private runningSpeedUrl: string = "/data-files/running-speed.js";
    
    public runningSpeedData: any[] = [];
    public lastMonthKmRun: any[] = [];

    public layoutConfig = {
        layoutMode: "grid",
        width: "100%",
        height: "500px",
        gridLayout: {
            cols: 3,
            rows: 3
        },
        items: [
            {
                rowSpan: 2,
                colSpan: 2,
                colIndex: 0,
                rowIndex: 0
            },
            {
                rowSpan: 1,
                colSpan: 1,
                rowIndex: 0,
                colIndex: 2
            },
            {
                rowSpan: 1,
                colSpan: 1,
                rowIndex: 1,
                colIndex: 2
            },
            {
                rowSpan: 1,
                colSpan: 3,
                colIndex: 0,
                rowIndex: 2
            }
        ]
    };

    public speedChartConfig = {
        width: "100%",
        height: "283px",
        dataSource: this.runningSpeedData,
        axes: [
            {
                name: "kmAxis",
                type: "categoryX",
                label: "km"
            },
            {
                name: "averageSpeedAxis",
                type: "numericY",
                minimumValue: 8,
                maximumValue: 15,
                title: "スピード (km/h)",
            }
        ],
        series: [
            {
                name: "speed",
                type: "spline",
                title: "speed",
                xAxis: "kmAxis",
                yAxis: "averageSpeedAxis",
                valueMemberPath: "speedPerHour",
                isTransitionInEnabled: true,
                isHighlightingEnabled: true,
                brush: "#f60",
                thickness: 3
            }
        ]
    };

    public totalKmChartConfig = {
        width: "100%",
        height: "117px",
        dataSource: this.lastMonthKmRun,
        outlines: ["rgba(0,0,0,0)"],
        axes: [{
            name: "monthDayAxis",
            type: "categoryX",
            label: "monthDay",
            interval: 1
        },
        {
            name: "kmRunAxis",
            type: "numericY",
            title: "km"
        }],
        series: [{
            name: "lastMonth",
            type: "column",
            isHighlightingEnabled: true,
            isTransitionInEnabled: true,
            xAxis: "monthDayAxis",
            yAxis: "kmRunAxis",
            valueMemberPath: "kmRun",
            brush: "#f60",
            thickness: 0,
            radius: 0
        }]
    };
    
    constructor(private http: Http) {}
    
    public ngOnInit() {
        
        let getLastMonth = this.http.get(this.lastMonthRunUrl).map(res => res.json());
        let getRunningSpeed = this.http.get(this.runningSpeedUrl).map(res => res.json());
        
        Observable.forkJoin([getLastMonth, getRunningSpeed]).subscribe(res => {
            this.lastMonthKmRun = res[0];
            this.runningSpeedData = res[1];
        });
    }
}

@NgModule({
    bootstraps: [AppComponent],
    declarations: [AppComponent, IgDataChartComponent, IgLayoutManagerComponent],
    imports: [BrowserModule, HttpModule]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

             
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
    <!-- 1. Load libraries -->
    <script src="/js/modernizr.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <!-- ReactJS library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="/igniteui/js/infragistics.core.js"></script>
    <script src="/igniteui/js/infragistics.lob.js"></script>
    <script src="/igniteui/js/infragistics.dv.js"></script>
    <!-- Ignite UI for jQuery ReactJS Files -->
    <script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
    <script src="/js-data/last-month-run-km"></script>
    <script src="/js-data/running-speed"></script>

    <style>
        ul {
            list-style-type: none; 
        }

        #layout {
            position: relative;
        }        

        .ig-layout-item {
            padding: 5px;
        }

        .ig-layout-item > div {
            position: absolute;
            height: auto;
            bottom: 0;
            top: 0;
            left: 0;
            right: 0;
            margin: 5px;
        }  

        .box {
            background-color: #fff;
            border: 1px solid #888;
            color: grey;
        }

        .box-title {
            color:#fff;
            background-color:#888;
            font-size: 16px;
            padding: 6px 0 10px 10px;
        }

        .box table td {
            padding: 0;
        }
        
        .box-body-big-text {
            font-size: 60px;
            margin-top: 15px;
            text-align: center;
            color: #f60;
        }

       @media all and (max-width: 910px) {
            .box-title {
                font-size: 14px;
            }

            .box-body-big-text {
                font-size: 49px;
                margin-top: 24px;
            }
        }

        @media all and (max-width: 740px) {
            .box-title {
                font-size: 12px;
            }
            .box-body-big-text {
                font-size: 38px;
                margin-top: 34px;
            }
        }

        @media all and (max-width: 570px) {
            .box-title {
                font-size: 10px;
            }
            .box-body-big-text {
                font-size: 20px;
                margin-top: 47px;
            }
        }

        @media all and (max-width: 360px) {
            .box-title {
                font-size: 10px;
            }
            .box-body-big-text {
                font-size: 17px;
                margin-top: 45px;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <script type="text/babel">

            let App = React.createClass({
                
                getConfig: function() {
                    return {
                        layout: {
                            layoutMode: "grid",
                            width: "100%",
                            height: "500px",
                            gridLayout: {
                                cols: 3,
                                rows: 3
                            },
                            items: [
                                {
                                    rowSpan: 2,
                                    colSpan: 2,
                                    colIndex: 0,
                                    rowIndex: 0
                                },
                                {
                                    rowSpan: 1,
                                    colSpan: 1,
                                    rowIndex: 0,
                                    colIndex: 2
                                },
                                {
                                    rowSpan: 1,
                                    colSpan: 1,
                                    rowIndex: 1,
                                    colIndex: 2
                                },
                                {
                                    rowSpan: 1,
                                    colSpan: 3,
                                    colIndex: 0,
                                    rowIndex: 2
                                }
                            ]
                        },
                        speedChart: {
                            width: "100%",
                            height: "283px",
                            dataSource: runningSpeedData,
                            axes: [
                                {
                                    name: "kmAxis",
                                    type: "categoryX",
                                    label: "km"
                                },
                                {
                                    name: "averageSpeedAxis",
                                    type: "numericY",
                                    minimumValue: 8,
                                    maximumValue: 15,
                                    title: "スピード (km/h)",
                                }
                            ],
                            series: [
                                {
                                    name: "speed",
                                    type: "spline",
                                    title: "speed",
                                    xAxis: "kmAxis",
                                    yAxis: "averageSpeedAxis",
                                    valueMemberPath: "speedPerHour",
                                    isTransitionInEnabled: true,
                                    isHighlightingEnabled: true,
                                    brush: "#f60",
                                    thickness: 3
                                }
                            ]
                        },
                        totalKmChart: {
                            width: "100%",
                            height: "117px",
                            dataSource: lastMonthKmRun,
                            outlines: ["rgba(0,0,0,0)"],
                            axes: [{
                                name: "monthDayAxis",
                                type: "categoryX",
                                label: "monthDay",
                                interval: 1
                            },
                            {
                                name: "kmRunAxis",
                                type: "numericY",
                                title: "km"
                            }],
                            series: [{
                                name: "lastMonth",
                                type: "column",
                                isHighlightingEnabled: true,
                                isTransitionInEnabled: true,
                                xAxis: "monthDayAxis",
                                yAxis: "kmRunAxis",
                                valueMemberPath: "kmRun",
                                brush: "#f60",
                                thickness: 0,
                                radius: 0
                            }]
                        }
                    };
                },

                render: function() {
                    return (
                        <div id="layout-wrapper">
                            <IgLayoutManager id="layout" options={this.getConfig().layout}>
                                <div>
                                    <div class="box">
                                        <div class="box-title">前回の速度</div>
                                        <IgDataChart id="speedLineChart" class="chartElement" options={this.getConfig().speedChart} />
                                    </div>
                                </div>
                                <div>
                                    <div class="box">
                                        <div class="box-title">先週の走行距離</div>
                                        <div class="box-body-big-text">49 km</div>
                                    </div>
                                </div>
                                <div>
                                    <div class="box">
                                        <div class="box-title">先週の合計カロリー</div>
                                        <div class="box-body-big-text">3675 cal</div>
                                    </div>
                                </div>
                                <div>
                                    <div class="box">
                                        <div class="box-title">先月の合計距離</div>
                                        <IgDataChart id="totalKmBarChart" class="chartElement" options={this.getConfig().totalKmChart} />
                                    </div>
                                </div>
                            </IgLayoutManager>
                        </div>
                    ); 
                }
            });


            ReactDOM.render(
                <App />,
                document.getElementById('app')
            );
        </script>
    </div>
</body>
</html>

Ignite UI for jQuery | サンプル

検索結果

レイアウトマネージャー - 概要

コードビュー

Ignite UI for jQuery | サンプル

検索結果

レイアウト マネージャー - 概要

コード ビュー

レイアウトマネージャー - 概要

コードビュー