Wijmo 5

Gauge入門

このページでは、WijmoのGaugeコントロールを使い始める方法を示します。

はじめに

Steps for getting started with the Gauge controls in KnockoutJS applications:

  1. Add references to KnockoutJS, Wijmo, and Wijmo's KnockoutJS bindings.
  2. Add a view model to provide data and logic.
  3. Add a Wijmo Gauge control to the page and bind it to your data.
  4. (Optional) Add some CSS to customize the input control's appearance.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="css/wijmo.css" /> <link rel="stylesheet" href="styles/app.css" /> <script src="scripts/knockout.js" type="text/javascript"></script> <script src="scripts/wijmo.js" type="text/javascript"></script> <script src="scripts/wijmo.input.js" type="text/javascript"></script> <script src="scripts/wijmo.gauge.js" type="text/javascript"></script> <script src="scripts/wijmo.knockout.js" type="text/javascript"></script> <script src="scripts/bindings/appBindings.js"></script> <script src="scripts/app.js"></script> <script src="scripts/viewmodels/appVM.js"></script> </head> <body> <!-- Wijmo 5 LinearGauge directive --> <div data-bind="wjLinearGauge: { value: props.value, min: props.min, max: props.max, format: props.format }"></div> <!-- Wijmo 5 RadialGauge directive --> <div data-bind="wjRadialGauge: { value: props.value, min: props.min, max: props.max, format: props.format }"></div> <!-- Wijmo 5 InputNumber directive --> <div class="app-input-group"> <label>ゲージの値</label> <div data-bind="wjInputNumber: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step }"></div> </div> </html>
// create and apply application view model function viewModel1() { this.props = { format: 'p0', max: 1, min: 0, value: ko.observable(0.5) ............. }; }; (function () { ko.applyBindings(new viewModel1()); })();

結果(ライブ):

Displaying Values

The gauge controls offer a showText property that determines which values to display as text with the gauge. There are four valid values for the showText property:

The example below shows what happens when you change the showText property.

<div data-bind="wjLinearGauge: { value: props.value, min: props.min, max: props.max, format: props.format, showText: props.showText }" class="linear-gauge"></div> <div data-bind="wjRadialGauge: { value: props.value, min: props.min, max: props.max, format: props.format, showText: props.showText }" class="radial-gauge"></div> <div class="app-input-group"> <label>ゲージの値</label> <div data-bind="wjInputNumber: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step }"></div> </div> <div data-bind="wjMenu: { value: props.showText, header: 'Show Text' }"> <span data-bind="wjMenuItem: { value: 'Value' }">Value</span> <span data-bind="wjMenuItem: { value: 'MinMax' }">最小値と最大値</span> <span data-bind="wjMenuItem: { value: 'All' }">All</span> <span data-bind="wjMenuItem: { value: 'None' }">None</span> </div>
this.props = { format: 'p0', max: 1, min: 0, showText: ko.observable('All'), step: 0.25, value: ko.observable(0.5) };

結果(ライブ):

最小値と最大値 すべて なし

範囲の使用

All Wijmo gauges have a ranges property that contains an array of Range objects. By default, the ranges are displayed on the face of gauge to indicate zones of interest; however, you can use the showRanges property to to hide the ranges. Instead, the gauge determines which range contains the current value and applies that range's color to the gauge pointer.

The Range object itself offers properties such as min, max, and color to customize each zone.

The following example demonstrates how to use ranges with the LinearGauge, BulletGraph, and RadialGauge.

<div data-bind="wjLinearGauge: { value: props.value, min: props.min, max: props.max, format: props.format, showRanges: props.showRanges }" class="linear-gauge"> <div data-bind="wjRange: { wjProperty: 'pointer', thickness: props.ranges.pointerThickness }"></div> <div data-bind="wjRange: { min: props.ranges.lower.min, max: props.ranges.lower.max, color: props.ranges.lower.color }"></div> <div data-bind="wjRange: { min: props.ranges.middle.min, max: props.ranges.middle.max, color: props.ranges.middle.color }"></div> <div data-bind="wjRange: { min: props.ranges.upper.min, max: props.ranges.upper.max, color: props.ranges.upper.color }"></div> </div> <div data-bind="wjBulletGraph: { value: props.value, min: props.min, max: props.max, format: props.format, good: props.ranges.middle.max, bad: props.ranges.middle.min, target: props.ranges.target, showRanges: props.showRanges }" class="linear-gauge"> <div data-bind="wjRange: { wjProperty: 'pointer', thickness: props.ranges.pointerThickness }"></div> </div> <div data-bind="wjRadialGauge: { value: props.value, min: props.min, max: props.max, format: props.format, showRanges: props.showRanges }" class="radial-gauge"> <div data-bind="wjRange: { wjProperty: 'pointer', thickness: props.ranges.pointerThickness }"></div> <div data-bind="wjRange: { min: props.ranges.lower.min, max: props.ranges.lower.max, color: props.ranges.lower.color }"></div> <div data-bind="wjRange: { min: props.ranges.middle.min, max: props.ranges.middle.max, color: props.ranges.middle.color }"></div> <div data-bind="wjRange: { min: props.ranges.upper.min, max: props.ranges.upper.max, color: props.ranges.upper.color }"></div> </div> <div class="app-input-group"> <label>ゲージの値</label> <div data-bind="wjInputNumber: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step }"></div> </div> <label> Show Ranges  <input type="checkbox" data-bind="checked: props.showRanges" /> </label>
var self = this; // a set of property values for the Wijmo Gauges this.props = { format: 'p0', max: 1, min: 0, showRanges: ko.observable(true), step: 0.25, value: ko.observable(0.5) }; this.props.ranges = { pointerThickness: ko.computed(function () { return self.props.showRanges() ? 0.5 : 1; }), target: .75, lower: { min: 0, max: .33, color: ko.computed(function () { return self.props.showRanges() ? 'rgba(255,100,100,.1)' : 'red'; }) }, middle: { min: .33, max: .66, color: ko.computed(function () { return self.props.showRanges() ? 'rgba(255,255,100,.1)' : 'yellow'; }) }, upper: { min: .66, max: 1, color: ko.computed(function () { return self.props.showRanges() ? 'rgba(100,255,100,.1)' : 'green'; }) } };

結果(ライブ):

Automatic Scaling

The RadialGauge offers two properties to configure its layout, startAngle and sweepAngle. The startAngle property specifies the RadialGauge's starting angle, or rotation. The sweepAngle property specifies an angle representing the length of the RadialGauge's arc. The angle for both properties are measured clockwise, starting a the 9 o'clock position.

The RadialGauge also offers the autoScale property. When autoScale is set to true, the RadialGauge will be automatically scaled to fill its containing element.

The following example allows you to adjust the startAngle, sweepAngle, and autoScale properties in real-time.

<div data-bind="wjRadialGauge: { value: props.value, min: props.min, max: props.max, format: props.format, autoScale: props.autoScale, startAngle: props.startAngle, sweepAngle: props.sweepAngle}" class="radial-gauge"></div> <div class="app-input-group"> <label>ゲージの値</label> <div data-bind="wjInputNumber: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step }"></div> </div> <div class="app-input-group"> <label>Start Angle</label> <div data-bind="wjInputNumber: { value: props.startAngle, min: -360, max: 360, step: 45 }"></div> </div> <div class="app-input-group"> <label>Sweep Angle</label> <div data-bind="wjInputNumber: { value: props.sweepAngle, min: 0, max: 360, step: 45 }"></div> </div> <label> Auto-Scale  <input type="checkbox" data-bind="checked: props.autoScale" /> </label>
this.props = { autoScale: ko.observable(true), format: 'p0', max: 1, min: 0, startAngle: ko.observable(0), sweepAngle: ko.observable(180), value: ko.observable(0.5) };

結果(ライブ):

Direction

The RadialGauge's startAngle and sweepAngle properties do not apply to the LinearGauge or BulletGraph. Instead, the LinearGauge and BulletGraph offer the direction property to determine how it should be displayed. There are four options for the direction property:

The example below allows you to see what happens when the direction property is changed.

<div data-bind="wjLinearGauge: { value: props.value, min: props.min, max: props.max, format: props.format, direction: props.direction, showRanges: props.showRanges }, style: (props.direction() == 'Up' || props.direction() == 'Down') ? {'height' : '300px', 'width': '1.2em'} : {'height' : '', 'width': ''}" class="linear-gauge"> <div data-bind="wjRange: { wjProperty: 'pointer', thickness: props.ranges.pointerThickness }"></div> <div data-bind="wjRange: { min: props.ranges.lower.min, max: props.ranges.lower.max, color: props.ranges.lower.color }"></div> <div data-bind="wjRange: { min: props.ranges.middle.min, max: props.ranges.middle.max, color: props.ranges.middle.color }"></div> <div data-bind="wjRange: { min: props.ranges.upper.min, max: props.ranges.upper.max, color: props.ranges.upper.color }"></div> </div> <div data-bind="wjBulletGraph: { value: props.value, min: props.min, max: props.max, format: props.format, good: props.ranges.middle.max, bad: props.ranges.middle.min, target: props.ranges.target, direction: props.direction, showranges: props.showranges }, style: (props.direction() == 'Up' || props.direction() == 'Down') ? {'height' : '300px', 'width': '1.2em'} : {'height' : '', 'width': ''}" class=" linear-gauge"> <div data-bind="wjRange: { wjProperty: 'pointer', thickness: props.ranges.pointerThickness }"></div> </div> <div class="app-input-group"> <label>ゲージの値</label> <div data-bind="wjInputNumber: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step }"></div> </div> <div data-bind="wjMenu: { value: props.direction, header: 'Direction' }"> <span data-bind="wjMenuItem: { value: 'Up' }">Up</span> <span data-bind="wjMenuItem: { value: 'Right' }">Right</span> <span data-bind="wjMenuItem: { value: 'Down' }">Down</span> <span data-bind="wjMenuItem: { value: 'Left' }">Left</span> </div>
var self = this; // a set of property values for the Wijmo Gauges this.props = { direction: ko.observable('Right'), format: 'p0', max: 1, min: 0, value: ko.observable(0.5) }; this.props.ranges = { pointerThickness: ko.computed(function () { return self.props.showRanges() ? 0.5 : 1 }), target: .75, lower: { min: 0, max: .33, color: ko.computed(function () { return self.props.showRanges() ? 'rgba(255,100,100,.1)' : 'red' }) }, middle: { min: .33, max: .66, color: ko.computed(function () { return self.props.showRanges() ? 'rgba(255,255,100,.1)' : 'yellow' }) }, upper: { min: .66, max: 1, color: ko.computed(function () { return self.props.showRanges() ? 'rgba(100,255,100,.1)' : 'green' }) } }

結果(ライブ):

スタイル設定

The appearance of the gauge controls is largely defined in CSS. In addition to the default theme, we include several professionally designed themes that customize the appearance of all Wijmo controls to achieve a consistent, attractive look.

You can customize the appearance of the gauges using CSS. To do this, copy the CSS rules from the default theme to a new CSS file and modify the properties as needed.

In this example, we added the "custom-gauge" CSS class to the LinearGauge & RadialGauge, and define some CSS rules to create an orange pointer for both.

<div data-bind="wjLinearGauge: { value: props.value, min: props.min, max: props.max, format: props.format, showText: 'Value' }" class="custom-gauge"></div> <div data-bind="wjRadialGauge: { value: props.value, min: props.min, max: props.max, format: props.format, showText: 'Value' }" class="custom-gauge"></div> <div class="app-input-group"> <label>ゲージの値</label> <div data-bind="wjInputNumber: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step }"></div> </div>
this.props = { format: 'p0', max: 1, min: 0, value: ko.observable(0.5) };
.custom-gauge .wj-pointer { fill: #ffa500; stroke: #cd853f; }

結果(ライブ):

Editing Values

The gauge controls can be used as a simple indicator or as an input control when the isReadOnly property is set to false. The gauges also offer a step property that determines how much to add or subtract from its current value when being used as an input control.

The example below demonstrates how to use the isReadOnly and step properties with the LinearGauge and RadialGauge controls.

<div data-bind="wjLinearGauge: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step, isReadOnly: props.isReadOnly }" class="linear-gauge"></div> <div data-bind="wjRadialGauge: { value: props.value, min: props.min, max: props.max, format: props.format, step: props.step, isReadOnly: props.isReadOnly }" class="radial-gauge"></div> <label> Read-Only  <input type="checkbox" data-bind="checked: props.isReadOnly" /> </label>
this.props = { format: 'p0', isReadOnly: ko.observable(false), max: 1, min: 0, step: 0.25, value: ko.observable(0.5) };

結果(ライブ):