OSS で利用できる機能
レイアウト マネージャー - グリッド レイアウト
このサンプルは、レイアウト マネージャー コントロールのグリッド レイアウトを紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
前回の速度
先週の走行距離
49 km
先週の合計カロリー
3675 cal
先月の合計距離
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このコントロールは、グリッドの任意の位置に定義済みのサイズ (rowspan および colspan 設定を含む) で項目を配置できます。
コード ビュー
クリップボードへコピー
<!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/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.layout.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.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>