示例
文字值
Wijmo仪表有三个影响文本显示的属性：
- showText：确定仪表是否应将最小值，最大值和/或当前值显示为文本元素，
- format：获取或设置用于将数值转换为字符串的格式字符串，以及
- getText：用于提供自定义字符串以显示值的回调函数。
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 the gauge
let theGauge = new gauge.RadialGauge('#theGauge', {
isReadOnly: false,
hasShadow: false,
showText: 'All',
startAngle: -30,
sweepAngle: 240,
value: 80,
showRanges: false,
ranges: [
{ min: 0, max: 25, color: 'red' },
{ min: 25, max: 50, color: 'orange' },
{ min: 50, max: 100, color: 'green' },
]
});
theGauge.pointer.thickness = .15;
theGauge.thumbSize = 20;
//
// customize text properties
let showText = new input.ComboBox('#showText', {
textChanged: (s, e) => {
theGauge.showText = s.text;
},
itemsSource: 'None,Value,MinMax,All'.split(','),
text: 'All'
});
let format = new input.ComboBox('#format', {
textChanged: (s, e) => {
theGauge.format = s.text;
},
itemsSource: 'n0,n2,c0,c2'.split(','),
text: 'n0'
});
document.getElementById('getText').addEventListener('click', (e) => {
theGauge.getText = e.target.checked ? getTextCallback : null;
});
//
// getText callback function
function getTextCallback(gauge, part, value, text) {
switch (part) {
case 'value':
if (value <= 10)
return 'Empty!';
if (value <= 25)
return 'Low...';
if (value <= 95)
return 'Good';
return 'Full';
case 'min':
return 'empty';
case 'max':
return 'full';
}
return text;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Text Values</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="showText">Show Text:</label>
<div id="showText"></div>
</div>
<div class="form-group">
<label for="format">Format:</label>
<div id="format"></div>
</div>
<div class="form-check">
<label for="getText" class="form-check-label">Custom Text:</label>
<input id="getText" type="checkbox" class="form-check-input">
</div>
</div>
<div class="col-xs-6">
<div id="theGauge"></div>
</div>
</div>
</div>
</body>
</html>
.wj-gauge {
height: 150px;
margin: 20px auto;
padding: 12px;
background: rgba(0, 0, 0, .02);
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.wj-gauge .wj-pointer {
fill: black;
}
label {
width: 120px;
text-align: right;
margin-right: 3px;
}
.wj-dropdown,
.wj-inputnumber {
width: 120px;
}
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
//
import * as gauge from '@grapecity/wijmo.gauge';
//
import { Component, enableProdMode, NgModule, ViewChild } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { WjInputModule } from '@grapecity/wijmo.angular2.input';
import { WjGaugeModule } from '@grapecity/wijmo.angular2.gauge';
import { FormsModule } from '@angular/forms';
//
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
@ViewChild('theGauge') theGauge: gauge.RadialGauge;
showText = 'All';
//
get customText() {
return !!this.theGauge.getText;
}
set customText(value: boolean) {
this.theGauge.getText = value ? this.getTextCallback : null;
}
//
// getText callback function
private getTextCallback(gauge: gauge.Gauge, part: string, value: number, text: string) {
switch (part) {
case 'value':
if (value <= 10) return 'Empty!';
if (value <= 25) return 'Low...';
if (value <= 95) return 'Good';
return 'Full';
case 'min':
return 'empty';
case 'max':
return 'full';
}
return text;
}
}
//
@NgModule({
imports: [WjGaugeModule, WjInputModule, BrowserModule, FormsModule],
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>Text Values</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="showText">Show Text:</label>
<wj-combo-box id="showText" [itemsSource]="['None', 'Value', 'MinMax', 'All']" [(text)]="showText">
</wj-combo-box>
</div>
<div class="form-group">
<label for="format">Format:</label>
<wj-combo-box id="format" [itemsSource]="['n0', 'n2', 'c0', 'c2']" [(text)]="theGauge.format">
</wj-combo-box>
</div>
<div class="form-check">
<label for="customText" class="form-check-label">Custom Text:</label>
<input id="customText" type="checkbox" class="form-check-input" [(ngModel)]="customText">
</div>
</div>
<div class="col-xs-6">
<wj-radial-gauge #theGauge [isReadOnly]="false" [hasShadow]="false" [showText]="showText" [startAngle]="-30"
[sweepAngle]="240" [value]="80" [showRanges]="false" [format]="'n0'">
<wj-range [min]="0" [max]="25" [color]="'red'"></wj-range>
<wj-range [min]="25" [max]="50" [color]="'orange'"></wj-range>
<wj-range [min]="50" [max]="100" [color]="'green'"></wj-range>
</wj-radial-gauge>
</div>
</div>
</div>
.wj-gauge {
height: 150px;
margin: 20px auto;
padding: 12px;
background: rgba(0, 0, 0, .02);
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.wj-gauge .wj-pointer {
fill: black;
}
label {
width: 120px;
text-align: right;
margin-right: 3px;
}
.wj-dropdown,
.wj-inputnumber {
width: 120px;
}
<template>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="showText">Show Text:</label>
<wj-combo-box id="showText" :itemsSource="theGauge.textSource" :text="theGauge.showText" :selectedIndexChanged="onInputValueChanged">
</wj-combo-box>
</div>
<div class="form-group">
<label for="format">Format:</label>
<wj-combo-box id="format" :itemsSource="theGauge.formatSource" :text="theGauge.format" :selectedIndexChanged="onInputValueChanged">
</wj-combo-box>
</div>
<div class="form-check">
<label for="customText" class="form-check-label">Custom Text:</label>
<input id="customText" type="checkbox" class="form-check-input" v-model="theGauge.customText" @change="onCustomTextChanged">
</div>
</div>
<div class="col-xs-6">
<wj-radial-gauge :isReadOnly=false :hasShadow=false :showText="theGauge.showText" :startAngle=-30 :getText="theGauge.getText"
:sweepAngle=240 :value=80 :showRanges=false :format="theGauge.format">
<wj-range :min=0 :max=25 color="red"></wj-range>
<wj-range :min=25 :max=50 color="orange"></wj-range>
<wj-range :min=50 :max=100 color="green"></wj-range>
</wj-radial-gauge>
</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 {
theGauge: {
textSource: ['None', 'Value', 'MinMax', 'All'],
formatSource: ['n0', 'n2', 'c0', 'c2'],
customText: false,
showText: 'All',
format: 'n0',
getText: null
}
}
},
methods: {
onInputValueChanged: function(s,e) {
this.theGauge[s.hostElement.id] = s.text;
},
onCustomTextChanged: function(s,e){
this.theGauge.getText = s.target.checked ? this.getTextCallback : null;
},
getTextCallback: function(gauge, part, value, text){
switch (part) {
case 'value':
if (value <= 10) return 'Empty!';
if (value <= 25) return 'Low...';
if (value <= 95) return 'Good';
return 'Full';
case 'min':
return 'empty';
case 'max':
return 'full';
}
return text;
}
}
})
new Vue({ render: h => h(App) }).$mount('#app');
</script>
<style>
.container-fluid .wj-gauge {
height: 150px;
margin: 20px auto;
padding: 12px;
background: rgba(0, 0, 0, .02);
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.container-fluid .wj-gauge .wj-ticks {
stroke: white;
stroke-width: 2px;
}
label {
width: 120px;
text-align: right;
margin-right: 3px;
}
.wj-dropdown,
.wj-inputnumber {
width: 120px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Text Values</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>
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 wjGauge from '@grapecity/wijmo.react.gauge';
import * as wjInput from '@grapecity/wijmo.react.input';
//
class App extends React.Component {
constructor(props) {
super(props);
this._textSource = ['None', 'Value', 'MinMax', 'All'];
this._formatSource = ['n0', 'n2', 'c0', 'c2'];
this.state = {
customText: false,
showText: 'All',
format: 'n0',
getText: null,
value: 80
};
}
render() {
return (<div className="container-fluid">
<div className="row">
<div className="col-xs-6">
<div className="form-group">
<label date-for="showText">Show Text:</label>
<wjInput.ComboBox id="showText" itemsSource={this._textSource} text={this.state.showText} selectedIndexChanged={this._onShowTextChanged.bind(this)}>
</wjInput.ComboBox>
</div>
<div className="form-group">
<label date-for="format">Format:</label>
<wjInput.ComboBox id="format" itemsSource={this._formatSource} text={this.state.format} selectedIndexChanged={this._onFormatChanged.bind(this)}>
</wjInput.ComboBox>
</div>
<div className="form-check">
<label date-for="customText" className="form-check-label">Custom Text:</label>
<input id="customText" type="checkbox" className="form-check-input" checked={this.state.customText} onChange={this._onCustomTextChanged.bind(this)}/>
</div>
</div>
<div className="col-xs-6">
<wjGauge.RadialGauge isReadOnly={false} hasShadow={false} showText={this.state.showText} startAngle={-30} getText={this.state.getText} sweepAngle={240} value={this.state.value} showRanges={false} format={this.state.format} valueChanged={this._onValueChanged.bind(this)}>
<wjGauge.Range min={0} max={25} color="red"></wjGauge.Range>
<wjGauge.Range min={25} max={50} color="orange"></wjGauge.Range>
<wjGauge.Range min={50} max={100} color="green"></wjGauge.Range>
</wjGauge.RadialGauge>
</div>
</div>
</div>);
}
_onShowTextChanged(sender) {
this.setState({ showText: sender.text });
}
_onFormatChanged(sender) {
this.setState({ format: sender.text });
}
_onCustomTextChanged(s) {
this.setState({
customText: !this.state.customText,
getText: s.target.checked ? this._getTextCallback : null
});
}
_getTextCallback(gauge, part, value, text) {
switch (part) {
case 'value':
if (value <= 10)
return 'Empty!';
if (value <= 25)
return 'Low...';
if (value <= 95)
return 'Good';
return 'Full';
case 'min':
return 'empty';
case 'max':
return 'full';
}
return text;
}
_onValueChanged(sender) {
this.setState({ value: sender.value });
}
}
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>AutoComplete</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>
.container-fluid .wj-gauge {
height: 150px;
margin: 20px auto;
padding: 12px;
background: rgba(0, 0, 0, .02);
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.container-fluid .wj-gauge .wj-ticks {
stroke: white;
stroke-width: 2px;
}
label {
width: 120px;
text-align: right;
margin-right: 3px;
}
.wj-dropdown,
.wj-inputnumber {
width: 120px;
}
USA - International
Japan
South
Korea