ゲージ:目盛り

フェイスに沿って目盛りを表示して、ユーザーがゲージを読むのを助けることができます。 それらの可視性および位置は、showTickstickSpacing、およびstepプロパティによって制御されます。

目盛りの色と幅は、CSSまたはコードで定義できます。

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', showTicks: true, tickSpacing: 10, startAngle: -30, sweepAngle: 240, value: 50, pointer: { thickness: 0.5 } }); // // customize tickmarks document.getElementById('showTicks').addEventListener('click', (e) => { theGauge.showTicks = e.target.checked; }); let tickSpacing = new input.InputNumber('#tickSpacing', { min: 0, max: 100, step: 5, format: 'n0', value: theGauge.tickSpacing, valueChanged: (s, e) => { theGauge.tickSpacing = s.value; } }); let tickColor = new input.InputColor('#tickColor', { value: 'white', valueChanged: (s, e) => { let style = theGauge.hostElement.querySelector('.wj-ticks').style; style.stroke = s.value; } }); let tickWidth = new input.InputNumber('#tickWidth', { min: 0, max: 5, step: .25, format: 'n1', value: 2, valueChanged: (s, e) => { let style = theGauge.hostElement.querySelector('.wj-ticks').style; style.strokeWidth = s.value.toString(); } }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Tickmarks</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-check"> <label for="showTicks" class="form-check-label">目盛り:</label> <input id="showTicks" type="checkbox" checked="checked" class="form-check-input"> </div> <div class="form-group"> <label for="tickSpacing">間隔:</label> <div id="tickSpacing"></div> </div> <div class="form-group"> <label for="tickWidth">幅:</label> <div id="tickWidth"></div> </div> <div class="form-group"> <label for="tickColor">色:</label> <div id="tickColor"></div> </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-ticks { stroke: white; stroke-width: 2px; } 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 } 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 { showTicks = true; tickSpacing = 10; // changeTickWidth(gauge: gauge.RadialGauge, value: number) { (gauge.hostElement.querySelector('.wj-ticks') as HTMLElement).style.strokeWidth = value.toString(); } // changeTickColor(gauge: gauge.RadialGauge, value: string) { (gauge.hostElement.querySelector('.wj-ticks') as HTMLElement).style.stroke = value; } } // @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>Tickmarks</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-check"> <label for="showTicks" class="form-check-label">目盛り:</label> <input id="showTicks" type="checkbox" [(ngModel)]="showTicks" class="form-check-input"> </div> <div class="form-group"> <label for="tickSpacing">間隔:</label> <wj-input-number id="tickSpacing" [min]="0" [max]="100" [step]="5" [format]="'n0'" [(value)]="tickSpacing"> </wj-input-number> </div> <div class="form-group"> <label for="tickWidth">幅:</label> <wj-input-number #tickWidth id="tickWidth" [min]="0" [max]="5" [step]="0.25" [format]="'n1'" [value]="2" (valueChanged)="changeTickWidth(theGauge, tickWidth.value)"></wj-input-number> </div> <div class="form-group"> <label for="tickColor">色:</label> <wj-input-color #tickColor id="tickColor" [value]="'white'" (valueChanged)="changeTickColor(theGauge, tickColor.value)"></wj-input-color> </div> </div> <div class="col-xs-6"> <wj-radial-gauge #theGauge [isReadOnly]="false" [hasShadow]="false" [showText]="'All'" [showTicks]="showTicks" [tickSpacing]="tickSpacing" [startAngle]="-30" [sweepAngle]="240" [value]="50"> <wj-range [wjProperty]="'pointer'" [thickness]="0.5"></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-ticks { stroke: white; stroke-width: 2px; } label { width: 120px; text-align: right; margin-right: 3px; } .wj-dropdown, .wj-inputnumber { width: 120px; } 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.state = { tickWidth: 2, tickSpacing: 10, showTicks: true, tickColor: 'white', value: 50 }; } render() { return (<div className="container-fluid"> <div className="row"> <div className="col-xs-6"> <div className="form-check"> <label data-for="showTicks" className="form-check-label">目盛り:</label> <input id="showTicks" type="checkbox" checked={this.state.showTicks} className="form-check-input" onChange={this._onShowTicksChanged.bind(this)}/> </div> <div className="form-group"> <label data-for="tickSpacing">間隔:</label> <wjInput.InputNumber id="tickSpacing" min={0} max={100} step={5} format="n0" value={this.state.tickSpacing} valueChanged={this._onTickSpacingChanged.bind(this)}> </wjInput.InputNumber> </div> <div className="form-group"> <label data-for="tickWidth">幅:</label> <wjInput.InputNumber id="tickWidth" min={0} max={5} step={0.25} format="n1" value={this.state.tickWidth} valueChanged={this._onTickWidthChanged.bind(this)}> </wjInput.InputNumber> </div> <div className="form-group"> <label data-for="tickColor">色:</label> <wjInput.InputColor id="tickColor" value={this.state.tickColor} valueChanged={this._onTickColorChanged.bind(this)}> </wjInput.InputColor> </div> </div> <div className="col-xs-6"> <wjGauge.RadialGauge isReadOnly={false} hasShadow={false} showText="All" tickColor={this.state.tickColor} showTicks={this.state.showTicks} tickSpacing={this.state.tickSpacing} startAngle={-30} sweepAngle={240} value={this.state.value} valueChanged={this._onValueChanged.bind(this)}> <wjGauge.Range wjProperty="pointer" thickness={0.5}></wjGauge.Range> </wjGauge.RadialGauge> </div> </div> </div>); } _onTickSpacingChanged(sender) { this.setState({ tickSpacing: sender.value }); } _onTickWidthChanged(sender) { this.setState({ tickWidth: sender.value }); document.querySelector('.wj-ticks').style.strokeWidth = sender.value.toString(); } _onTickColorChanged(sender) { this.setState({ tickColor: sender.value }); document.querySelector('.wj-ticks').style.stroke = sender.value; } _onShowTicksChanged() { this.setState({ showTicks: !this.state.showTicks }); } _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>Tickmarks</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; } <template> <div class="container-fluid"> <div class="row"> <div class="col-xs-6"> <div class="form-check"> <label for="showTicks" class="form-check-label">目盛り:</label> <input id="showTicks" type="checkbox" v-model="theGauge.showTicks" class="form-check-input"> </div> <div class="form-group"> <label for="tickSpacing">間隔:</label> <wj-input-number id="tickSpacing" :min=0 :max=100 :step=5 format="n0" :value="theGauge.tickSpacing" :valueChanged="changeTickSpacing"> </wj-input-number> </div> <div class="form-group"> <label for="tickWidth">幅:</label> <wj-input-number id="tickWidth" :min=0 :max=5 :step=0.25 format="n1" :value="theGauge.tickWidth" :valueChanged="changeTickWidth"></wj-input-number> </div> <div class="form-group"> <label for="tickColor">色:</label> <wj-input-color id="tickColor" :value="theGauge.tickColor" :valueChanged="changeTickColor"></wj-input-color> </div> </div> <div class="col-xs-6"> <wj-radial-gauge :isReadOnly=false :hasShadow=false showText="All" :tickColor="theGauge.tickColor" :showTicks="theGauge.showTicks" :tickSpacing="theGauge.tickSpacing" :startAngle=-30 :sweepAngle=240 :value=50> <wj-range wjProperty="pointer" :thickness=0.5 ></wj-range> </wj-radial-gauge> </div> </div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import 'src/app.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: { tickWidth: 2, tickSpacing: 10, showTicks: true, tickColor: 'white' } } }, methods: { changeTickSpacing: function(s,e) { this.theGauge[s.hostElement.id] = s.value; }, changeTickWidth: function(s,e) { document.querySelector('.wj-ticks').style.strokeWidth = s.value.toString(); }, changeTickColor: function(s,e) { document.querySelector('.wj-ticks').style.stroke = s.value; } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Tickmarks</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>