基本的なプロパティ

すべてのWijmoゲージクラスに共通する主なプロパティは、minmax、およびvalueです。

showTextプロパティは、min/max/valueプロパティをゲージ上にテキストとして表示するために使用されます。

Wijmoゲージは入力コントロールとしても使用できます。isReadOnlyプロパティをfalseに設定した場合、ユーザーはマウス、キーボード、またはタッチを使用して値を変更できます。

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as input from '@grapecity/wijmo.input'; import * as gauge from '@grapecity/wijmo.gauge'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create gauges let theRadialGauge = new gauge.RadialGauge('#theRadialGauge', { min: 0, max: 100, value: 75, showText: 'None', valueChanged: (s, e) => { valueCtl.value = s.value; } }); let theLinearGauge = new gauge.LinearGauge('#theLinearGauge', { min: 0, max: 100, value: 75, showText: 'None', valueChanged: (s, e) => { valueCtl.value = s.value; } }); let theBulletGraph = new gauge.BulletGraph('#theBulletGraph', { min: 0, max: 100, value: 75, target: 60, bad: 50, good: 70, showText: 'None', valueChanged: (s, e) => { valueCtl.value = s.value; } }); function getGaugeProp(prop) { return theRadialGauge[prop]; } function setGaugeProp(prop, value) { theRadialGauge[prop] = value; theLinearGauge[prop] = value; theBulletGraph[prop] = value; } // // create controls to change gauge properties let minCtl = new input.InputNumber('#min', { step: 10, value: getGaugeProp('min'), valueChanged: (s, e) => { setGaugeProp('min', s.value); } }); let maxCtl = new input.InputNumber('#max', { step: 10, value: getGaugeProp('max'), valueChanged: (s, e) => { setGaugeProp('max', s.value); } }); let valueCtl = new input.InputNumber('#value', { step: 10, value: getGaugeProp('value'), valueChanged: (s, e) => { setGaugeProp('value', s.value); } }); let showTextCtl = new input.ComboBox('#showText', { itemsSource: 'なし,値,最小/最大値,すべて'.split(','), text: getGaugeProp('showText'), textChanged: (s, e) => { setGaugeProp('showText', s.selectedIndex); } }); document.getElementById('isReadOnly').addEventListener('click', (e) => { setGaugeProp('isReadOnly', e.target.checked); }); let stepCtl = new input.InputNumber('#step', { min: 1, step: 1, value: getGaugeProp('step'), valueChanged: (s, e) => { setGaugeProp('step', s.value); } }); document.getElementById('isAnimated').addEventListener('click', (e) => { setGaugeProp('isAnimated', e.target.checked); }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Gauge Basics</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <label for="min">最小値:</label> <div id="min"></div> </div> <div class="form-group"> <label for="max">最大値:</label> <div id="max"></div> </div> <div class="form-group"> <label for="value">値:</label> <div id="value"></div> </div> <div class="form-group"> <label for="showText">テキストを表示:</label> <div id="showText"></div> </div> <div class="form-check"> <label for="isReadOnly">読み取り専用:</label> <input id="isReadOnly" type="checkbox" checked="checked" class="form-check-input"> </div> <div class="form-group"> <label for="step">増減量:</label> <div id="step"></div> </div> <div class="form-check"> <label for="isAnimated">アニメーション:</label> <input id="isAnimated" type="checkbox" checked="checked" class="form-check-input"> </div> </div> <div class="col-xs-6"> <div id="theRadialGauge"></div> <div id="theLinearGauge"></div> <div id="theBulletGraph"></div> </div> </div> </div> </body> </html> label { width: 150px; text-align: right; margin-right: 3px; } .wj-inputnumber, .wj-combobox { width: 140px; } .wj-gauge { margin: 20px auto; } .wj-radialgauge { height: 100px; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { WjGaugeModule } from '@grapecity/wijmo.angular2.gauge'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { gauge = { min: 0, max: 100, value: 75, step: 1, showText: 'None', isReadOnly: true, isAnimated: true, itemsSource: ['None','Value','MinMax','All'].map((value, index) => { return { value: value, text: 'なし,値,最小/最大値,すべて'.split(',')[index] } }) }; } // @NgModule({ imports: [FormsModule, WjGaugeModule, WjInputModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Gauge Basics</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <label for="min">最小値:</label> <wj-input-number id="min" [step]="10" [(value)]="gauge.min"></wj-input-number> </div> <div class="form-group"> <label for="max">最大値:</label> <wj-input-number id="max" [step]="10" [(value)]="gauge.max"></wj-input-number> </div> <div class="form-group"> <label for="value">値:</label> <wj-input-number id="value" [step]="10" [(value)]="gauge.value"></wj-input-number> </div> <div class="form-group"> <label for="showText">テキストを表示:</label> <wj-combo-box id="showText" [(selectedValue)]="gauge.showText" displayMemberPath="text" selectedValuePath="value" [itemsSource]="gauge.itemsSource"> </wj-combo-box> </div> <div class="form-check"> <label for="isReadOnly">読み取り専用:</label> <input id="isReadOnly" type="checkbox" class="form-check-input" [(ngModel)]="gauge.isReadOnly"> </div> <div class="form-group"> <label for="step">増減量:</label> <wj-input-number id="step" [min]="1" [step]="1" [(value)]="gauge.step"></wj-input-number> </div> <div class="form-check"> <label for="isAnimated">アニメーション:</label> <input id="isAnimated" type="checkbox" class="form-check-input" [(ngModel)]="gauge.isAnimated"> </div> </div> <div class="col-xs-6"> <wj-radial-gauge [min]="gauge.min" [max]="gauge.max" [(value)]="gauge.value" [showText]="gauge.showText" [step]="gauge.step" [isReadOnly]="gauge.isReadOnly" [isAnimated]="gauge.isAnimated"></wj-radial-gauge> <wj-linear-gauge [min]="gauge.min" [max]="gauge.max" [(value)]="gauge.value" [showText]="gauge.showText" [step]="gauge.step" [isReadOnly]="gauge.isReadOnly" [isAnimated]="gauge.isAnimated"></wj-linear-gauge> <wj-bullet-graph [min]="gauge.min" [max]="gauge.max" [(value)]="gauge.value" [showText]="gauge.showText" [step]="gauge.step" [isReadOnly]="gauge.isReadOnly" [isAnimated]="gauge.isAnimated" [target]="60" [bad]="50" [good]="70"></wj-bullet-graph> </div> </div> </div> label { width: 150px; text-align: right; margin-right: 3px; } .wj-inputnumber, .wj-combobox { width: 140px; } .wj-gauge { margin: 20px auto; } .wj-radialgauge { height: 100px; } body { margin-bottom: 24pt; } import './app.css'; import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wjInput from '@grapecity/wijmo.react.input'; import * as wjGauge from '@grapecity/wijmo.react.gauge'; class App extends React.Component { constructor(props) { super(props); this._comboSource = ['None', 'Value', 'MinMax', 'All'].map((value, index) => { return { value: value, text: 'なし,値,最小/最大値,すべて'.split(',')[index] }; }); this.state = { min: 0, max: 100, value: 75, step: 1, showText: 'None', isReadOnly: true, isAnimated: true }; } render() { return (<div className="container-fluid"> <div className="row"> <div className="col-xs-6"> <div className="form-group"> <label htmlFor="min">最小値:</label> <wjInput.InputNumber id="min" step={10} value={this.state.min} valueChanged={this.inputValueChanged.bind(this, 'min')}> </wjInput.InputNumber> </div> <div className="form-group"> <label htmlFor="max">最大値:</label> <wjInput.InputNumber id="max" step={10} value={this.state.max} valueChanged={this.inputValueChanged.bind(this, 'max')}> </wjInput.InputNumber> </div> <div className="form-group"> <label htmlFor="value">値:</label> <wjInput.InputNumber id="value" step={10} value={this.state.value} valueChanged={this.inputValueChanged.bind(this, 'value')}> </wjInput.InputNumber> </div> <div className="form-group"> <label htmlFor="showText">テキストを表示:</label> <wjInput.ComboBox id="showText" text={this.state.showText} itemsSource={this._comboSource} selectedIndexChanged={this._comboValueChanged.bind(this)} displayMemberPath="text" selectedValuePath="value"> </wjInput.ComboBox> </div> <div className="form-check"> <label htmlFor="isReadOnly">読み取り専用:</label> <input id="isReadOnly" type="checkbox" className="form-check-input" checked={this.state.isReadOnly} onChange={this._setReadOnly.bind(this)}/> </div> <div className="form-group"> <label htmlFor="step">増減量:</label> <wjInput.InputNumber id="step" min={1} step={1} value={this.state.step} valueChanged={this.inputValueChanged.bind(this, 'step')}> </wjInput.InputNumber> </div> <div className="form-check"> <label htmlFor="isAnimated">アニメーション:</label> <input id="isAnimated" type="checkbox" className="form-check-input" checked={this.state.isAnimated} onChange={this._setAnimated.bind(this)}/> </div> </div> <div className="col-xs-6"> <wjGauge.RadialGauge min={this.state.min} max={this.state.max} value={this.state.value} showText={this.state.showText} step={this.state.step} isReadOnly={this.state.isReadOnly} isAnimated={this.state.isAnimated} valueChanged={this._gaugeValueChanged.bind(this)}> </wjGauge.RadialGauge> <wjGauge.LinearGauge min={this.state.min} max={this.state.max} value={this.state.value} showText={this.state.showText} step={this.state.step} isReadOnly={this.state.isReadOnly} isAnimated={this.state.isAnimated} valueChanged={this._gaugeValueChanged.bind(this)}> </wjGauge.LinearGauge> <wjGauge.BulletGraph min={this.state.min} max={this.state.max} value={this.state.value} showText={this.state.showText} step={this.state.step} isReadOnly={this.state.isReadOnly} isAnimated={this.state.isAnimated} target={60} bad={50} good={70} valueChanged={this._gaugeValueChanged.bind(this)}> </wjGauge.BulletGraph> </div> </div> </div>); } _comboValueChanged(sender) { this.setState({ showText: sender.selectedValue }); } _gaugeValueChanged(sender) { this.setState({ value: sender.value }); } inputValueChanged(stateProp, sender) { this.setState({ [stateProp]: sender.value }); } _setReadOnly() { this.setState({ isReadOnly: !this.state.isReadOnly }); } _setAnimated() { this.setState({ isAnimated: !this.state.isAnimated }); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Gauge Basics</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> label { width: 150px; text-align: right; } .container-fluid .wj-inputnumber, .container-fluid .wj-combobox { width: 140px; } .container-fluid .wj-gauge { margin: 20px auto; } .container-fluid .wj-radialgauge { height: 100px; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <div class="form-group"> <label for="min">最小値:</label> <wj-input-number id="min" :step=10 :value="gauge.min" :value-changed="onInputValueChanged"></wj-input-number> </div> <div class="form-group"> <label for="max">最大値:</label> <wj-input-number id="max" :step=10 :value="gauge.max" :value-changed="onInputValueChanged"></wj-input-number> </div> <div class="form-group"> <label for="value">値:</label> <wj-input-number id="value" :step=10 :value="gauge.value" :value-changed="onInputValueChanged"></wj-input-number> </div> <div class="form-group"> <label for="showText">テキストを表示:</label> <wj-combo-box id="showText" :text="gauge.showText" :items-source="gauge.comboSource" :selectedIndexChanged="onComboValueChanged" displayMemberPath="text" selectedValuePath="value"> </wj-combo-box> </div> <div class="form-check"> <label for="isReadOnly">読み取り専用:</label> <input id="isReadOnly" type="checkbox" class="form-check-input" v-model="gauge.isReadOnly"> </div> <div class="form-group"> <label for="step">増減量:</label> <wj-input-number id="step" :min=1 :step=1 :value="gauge.step" :value-changed="onInputValueChanged"></wj-input-number> </div> <div class="form-check"> <label for="isAnimated">アニメーション:</label> <input id="isAnimated" type="checkbox" class="form-check-input" v-model="gauge.isAnimated"> </div> </div> <div class="col-xs-6"> <wj-radial-gauge :min="gauge.min" :max="gauge.max" :value="gauge.value" :showText="gauge.showText" :step="gauge.step" :isReadOnly="gauge.isReadOnly" :isAnimated="gauge.isAnimated" :value-changed="onGaugeValueChanged"></wj-radial-gauge> <wj-linear-gauge :min="gauge.min" :max="gauge.max" :value="gauge.value" :showText="gauge.showText" :step="gauge.step" :isReadOnly="gauge.isReadOnly" :isAnimated="gauge.isAnimated" :value-changed="onGaugeValueChanged"></wj-linear-gauge> <wj-bullet-graph :min="gauge.min" :max="gauge.max" :value="gauge.value" :showText="gauge.showText" :step="gauge.step" :isReadOnly="gauge.isReadOnly" :isAnimated="gauge.isAnimated" :target=60 :bad=50 :good=70 :value-changed="onGaugeValueChanged"></wj-bullet-graph> </div> </div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.gauge'; import '@grapecity/wijmo.vue2.input'; let App = Vue.extend({ name: 'app', data: function(){ return { gauge: { min: 0, max: 100, value: 75, step: 1, showText: 'None', isReadOnly: true, isAnimated: true, comboSource: ['None','Value','MinMax','All'].map((value, index) => { return { value: value, text: 'なし,値,最小/最大値,すべて'.split(',')[index] } }) } } }, methods: { onInputValueChanged: function(s, e){ this.gauge[s.hostElement.id] = s.value; }, onComboValueChanged: function(s,e){ this.gauge.showText = s.selectedValue; }, onGaugeValueChanged: function(s, e){ this.gauge.value = s.value; } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> label { width: 150px; text-align: right; } .container-fluid .wj-inputnumber, .container-fluid .wj-combobox { width: 140px; } .container-fluid .wj-gauge { margin: 20px auto; } .container-fluid .wj-radialgauge { height: 100px; } body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Gauge Basics</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html>