范围

Wijmo仪表由 Range 对象组成。范围对象具有“min”和“max”属性,用于定义范围的范围,以及定义范围外观的“厚度”和“颜色”属性。

每个仪表至少有两个范围,“面”和“指针”:

  • face:代表仪表背景。面范围的“min”和“max”属性对应于仪表的“min”和“max”属性,并限制仪表可以显示的值。
  • pointer:表示仪表的当前值。指针范围的“max”属性对应于仪表的“value”属性。

除了这两个特殊范围外,仪表还可以在其“范围”集合中添加任意数量的附加范围。这些额外的范围可以以两种方式使用:

默认情况下,额外范围显示为仪表背景的一部分。通过这种方式,您可以在指标内显示“区域”,例如“好”,“平均”和“坏”。如果将仪表的“showRanges”属性设置为false,则不会显示其他范围。相反,它们用于根据当前仪表值自动设置“指针”范围的颜色:

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as gauge from '@grapecity/wijmo.gauge'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let radThickness = 0.2; let linThickness = 0.4; // // create gauges let theRadialGauge = new gauge.RadialGauge('#theRadialGauge', { min: 0, max: 100, value: 75, isReadOnly: false, step: 10, pointer: { thickness: radThickness, color: 'black' }, ranges: [ { name: 'low', min: 0, max: 25, color: 'rgba(255,0,0,.4)' }, { name: 'med', min: 25, max: 50, color: 'rgba(255,255,0,.4)' }, { name: 'high', min: 50, max: 75, color: 'rgba(255,125,0,.4)' }, { name: 'top', min: 75, max: 100, color: 'rgba(0,255,0,.4)' }, ], valueChanged: (s) => { theLinearGauge.value = s.value; } }); // let theLinearGauge = new gauge.LinearGauge('#theLinearGauge', { min: 0, max: 100, value: 75, isReadOnly: false, step: 10, pointer: { thickness: linThickness, color: 'black' }, ranges: [ { name: 'low', min: 0, max: 25, color: 'rgba(255,0,0,.4)' }, { name: 'med', min: 25, max: 50, color: 'rgba(255,255,0,.4)' }, { name: 'high', min: 50, max: 75, color: 'rgba(255,125,0,.4)' }, { name: 'top', min: 75, max: 100, color: 'rgba(0,255,0,.4)' }, ], valueChanged: (s) => { theRadialGauge.value = s.value; } }); // document.getElementById('showRanges').addEventListener('click', (e) => { if (e.target.checked) { theRadialGauge.showRanges = theLinearGauge.showRanges = true; theRadialGauge.pointer.thickness = radThickness; theLinearGauge.pointer.thickness = linThickness; } else { theRadialGauge.showRanges = theLinearGauge.showRanges = false; theRadialGauge.pointer.thickness = 1; theLinearGauge.pointer.thickness = 1; } }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Ranges</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="form-check"> <label for="showRanges" class="form-check-label">showRanges:</label> <input id="showRanges" type="checkbox" checked="checked" class="form-check-input"> </div> <div id="theRadialGauge"></div> <div id="theLinearGauge"></div> </div> </body> </html> .wj-gauge { margin: 20px auto; width: 50%; max-width: 250px; } body { margin-bottom: 24pt; } label { margin-right: 3px; } 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 { WjGaugeModule } from '@grapecity/wijmo.angular2.gauge'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { private _showRanges = true; // gaugeValue = 75; radThickness = 0.2; linThickness = 0.4; // get showRanges() { return this._showRanges; } set showRanges(value: boolean) { if (this._showRanges !== value) { this.radThickness = value ? 0.2 : 1; this.linThickness = value ? 0.4 : 1; this._showRanges = value; } } } // @NgModule({ imports: [WjGaugeModule, 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>Ranges</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="form-check"> <label for="showRanges" class="form-check-label">showRanges:</label> <input id="showRanges" type="checkbox" class="form-check-input" [(ngModel)]="showRanges"> </div> <wj-radial-gauge #theRadialGauge [min]="0" [max]="100" [(value)]="gaugeValue" [isReadOnly]="false" [step]="10" [showRanges]="showRanges"> <wj-range [wjProperty]="'pointer'" [thickness]="radThickness" [color]="'black'"></wj-range> <wj-range [name]="'low'" [min]="0" [max]="25" [color]="'rgba(255,0,0,0.4)'"></wj-range> <wj-range [name]="'med'" [min]="25" [max]="50" [color]="'rgba(255,255,0,0.4)'"></wj-range> <wj-range [name]="'high'" [min]="50" [max]="75" [color]="'rgba(255,125,0,0.4)'"></wj-range> <wj-range [name]="'top'" [min]="75" [max]="100" [color]="'rgba(0,255,0,0.4)'"></wj-range> </wj-radial-gauge> <wj-linear-gauge #theLinearGauge [min]="0" [max]="100" [(value)]="gaugeValue" [isReadOnly]="false" [step]="10" [showRanges]="showRanges"> <wj-range [wjProperty]="'pointer'" [thickness]="linThickness" [color]="'black'"></wj-range> <wj-range [name]="'low'" [min]="0" [max]="25" [color]="'rgba(255,0,0,0.4)'"></wj-range> <wj-range [name]="'med'" [min]="25" [max]="50" [color]="'rgba(255,255,0,0.4)'"></wj-range> <wj-range [name]="'high'" [min]="50" [max]="75" [color]="'rgba(255,125,0,0.4)'"></wj-range> <wj-range [name]="'top'" [min]="75" [max]="100" [color]="'rgba(0,255,0,0.4)'"></wj-range> </wj-linear-gauge> </div> .wj-gauge { margin: 20px auto; width: 50%; max-width: 250px; } body { margin-bottom: 24pt; } label { margin-right: 3px; } <template> <div class="container-fluid"> <div class="form-check"> <label for="showRanges" class="form-check-label">showRanges:</label> <input id="showRanges" type="checkbox" class="form-check-input" v-model="theGauge.showRanges" v-on:change="setThickness"> </div> <wj-radial-gauge :min=0 :max=100 :value="theGauge.value" :isReadOnly=false :step=10 :showRanges="theGauge.showRanges" :value-changed="onValueChanged"> <wj-range wjProperty="pointer" :thickness="theGauge.radThickness" color="black"></wj-range> <wj-range name="low" :min=0 :max=25 color="rgba(255,0,0,0.4)"></wj-range> <wj-range name="med" :min=25 :max=50 color="rgba(255,255,0,0.4)"></wj-range> <wj-range name="high" :min=50 :max=75 color="rgba(255,125,0,0.4)"></wj-range> <wj-range name="top" :min=75 :max=100 color="rgba(0,255,0,0.4)"></wj-range> </wj-radial-gauge> <wj-linear-gauge :min=0 :max=100 :value="theGauge.value" :isReadOnly=false :step=10 :showRanges="theGauge.showRanges" :value-changed="onValueChanged"> <wj-range wjProperty="pointer" :thickness="theGauge.linThickness" color="black"></wj-range> <wj-range name="low" :min=0 :max=25 color="rgba(255,0,0,0.4)"></wj-range> <wj-range name="med" :min=25 :max=50 color="rgba(255,255,0,0.4)"></wj-range> <wj-range name="high" :min=50 :max=75 color="rgba(255,125,0,0.4)"></wj-range> <wj-range name="top" :min=75 :max=100 color="rgba(0,255,0,0.4)"></wj-range> </wj-linear-gauge> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.gauge'; let App = Vue.extend({ name: 'app', data: function(){ return { theGauge: { value: 75, showRanges: true, radThickness: 0.2, linThickness: 0.4 } } }, methods: { setThickness: function(s,e){ this.theGauge.radThickness = s.target.checked ? 0.2 : 1; this.theGauge.linThickness = s.target.checked ? 0.4 : 1; }, onValueChanged: function(s,e){ this.theGauge.value = s.value; } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> .container-fluid .wj-gauge { margin: 20px auto; width: 50%; max-width: 250px; } 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>Ranges</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'; class App extends React.Component { constructor(props) { super(props); this.state = { value: 75, showRanges: true, radThickness: 0.2, linThickness: 0.4 }; } setThickness() { this.setState({ showRanges: !this.state.showRanges, radThickness: !this.state.showRanges ? 0.2 : 1, linThickness: !this.state.showRanges ? 0.4 : 1 }); } onValueChanged(type) { this.setState({ value: (type == 'RadialGauge') ? this._radialGaugeValue.value : this._linearGaugeValue.value }); } render() { return (<div className="container-fluid"> <div className="form-check"> <label date-for="showRanges" className="form-check-label">showRanges:</label> <input id="showRanges" type="checkbox" className="form-check-input" checked={this.state.showRanges} onChange={this.setThickness.bind(this)}/> </div> <wjGauge.RadialGauge min={0} max={100} value={this.state.value} isReadOnly={false} step={10} initialized={control => this._radialGaugeValue = control} showRanges={this.state.showRanges} valueChanged={() => this.onValueChanged("RadialGauge")}> <wjGauge.Range wjProperty="pointer" thickness={this.state.radThickness} color="black"></wjGauge.Range> <wjGauge.Range name="low" min={0} max={25} color="rgba(255,0,0,0.4)"></wjGauge.Range> <wjGauge.Range name="med" min={25} max={50} color="rgba(255,255,0,0.4)"></wjGauge.Range> <wjGauge.Range name="high" min={50} max={75} color="rgba(255,125,0,0.4)"></wjGauge.Range> <wjGauge.Range name="top" min={75} max={100} color="rgba(0,255,0,0.4)"></wjGauge.Range> </wjGauge.RadialGauge> <wjGauge.LinearGauge min={0} max={100} value={this.state.value} isReadOnly={false} step={10} initialized={control => this._linearGaugeValue = control} showRanges={this.state.showRanges} valueChanged={() => this.onValueChanged("LinearGauge")}> <wjGauge.Range wjProperty="pointer" thickness={this.state.linThickness} color="black"></wjGauge.Range> <wjGauge.Range name="low" min={0} max={25} color="rgba(255,0,0,0.4)"></wjGauge.Range> <wjGauge.Range name="med" min={25} max={50} color="rgba(255,255,0,0.4)"></wjGauge.Range> <wjGauge.Range name="high" min={50} max={75} color="rgba(255,125,0,0.4)"></wjGauge.Range> <wjGauge.Range name="top" min={75} max={100} color="rgba(0,255,0,0.4)"></wjGauge.Range> </wjGauge.LinearGauge> </div>); } } 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 { margin: 20px auto; width: 50%; max-width: 250px; } body { margin-bottom: 24pt; }