방사형 계기(니들 포인터 포함)

기본적으로 Wijmo의 방사형 계기는 색상 지정 섹터와 텍스트 요소를 사용하여 계기의 현재 값을 나타냅니다. 따라서 모양이 깔끔하고 읽기 쉽습니다.

보다 일반적인 니들 스타일 포인터를 선호하는 경우 needleShapeneedleLength 속성을 사용하여 CSS 스타일을 지정할 수 있는 니들 포인터를 선택합니다.

needleElement 속성을 통해 사용자 정의 SVG 요소를 니들로 사용하고, createNeedleElement 메서드를 통해 사용자 정의 니들 모양을 만들 수도 있습니다.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { ComboBox } from '@grapecity/wijmo.input'; import { RadialGauge, ShowText, NeedleShape, NeedleLength } from '@grapecity/wijmo.gauge'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // create the gauge let theRadialGauge = new RadialGauge('#theRadialGauge', { showText: ShowText.None, min: 0, max: 500, value: 100, startAngle: -45, sweepAngle: 270, showTicks: true, showTickText: true, tickSpacing: 50, thickness: 0.2, needleShape: NeedleShape.Pointer, isReadOnly: false }); // configure the gauge new ComboBox('#start', { itemsSource: [-90, -45, 0, 45, 90], selectedItem: theRadialGauge.startAngle, selectedIndexChanged: (s) => { theRadialGauge.startAngle = s.selectedItem; } }); new ComboBox('#sweep', { itemsSource: [-360, -270, -180, -90, 90, 180, 270, 360], selectedItem: theRadialGauge.sweepAngle, selectedIndexChanged: (s) => { theRadialGauge.sweepAngle = s.selectedItem; } }); new ComboBox('#spacing', { itemsSource: [20, 50, 100, 200, 250], selectedItem: 50, selectedIndexChanged: (s) => { theRadialGauge.tickSpacing = s.selectedItem; } }); new ComboBox('#needle-shape', { itemsSource: 'None,Triangle,Diamond,Hexagon,Rectangle,Arrow,WideArrow,Pointer,WidePointer,Outer'.split(','), text: NeedleShape[theRadialGauge.needleShape], textChanged: (s) => { theRadialGauge.needleShape = s.text; theRadialGauge.showText = s.text.match(/Outer|None/) ? ShowText.Value : ShowText.None; } }); new ComboBox('#needle-length', { itemsSource: 'Outer,Middle,Inner'.split(','), text: 'Middle', textChanged: (s) => { theRadialGauge.needleLength = s.text; } }); // gauges with custom needles new RadialGauge('#customGauge1', { thickness: .2, showText: ShowText.None, min: 0, max: 500, value: 100, startAngle: -45, sweepAngle: 270, showTicks: true, showTickText: true, tickSpacing: 50, isReadOnly: false, needleLength: NeedleLength.Inner, needleElement: RadialGauge.createNeedleElement([ { x: -35, y: 0 }, { x: -35, y: 35 }, { x: -30, y: 35 }, { x: -20, y: 5 }, { x: 60, y: 5 }, { x: 100, y: 0 } ], 15) }); new RadialGauge('#customGauge2', { thickness: .2, showText: ShowText.None, min: 0, max: 500, value: 100, startAngle: -45, sweepAngle: 270, showTicks: true, showTickText: true, tickSpacing: 50, isReadOnly: false, needleLength: NeedleLength.Inner, needleElement: RadialGauge.createNeedleElement([ { x: -10, y: 0 }, { x: -10, y: 12 }, { x: 0, y: 20 }, { x: 35, y: 20 }, { x: 50, y: 12 }, { x: 10, y: 12 }, { x: 10, y: 5 }, { x: 80, y: 5 }, { x: 100, y: 0 } ]) }); new RadialGauge('#customGauge3', { thickness: .2, showText: ShowText.Value, min: 0, max: 500, value: 100, startAngle: -45, sweepAngle: 270, showTicks: true, showTickText: true, tickSpacing: 50, isReadOnly: false, needleLength: NeedleLength.Inner, needleElement: RadialGauge.createNeedleElement([ { x: 40, y: 15 }, { x: 90, y: 0 } ]) }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Radial Gauges with Needle Pointers</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"> <p> Select one of the built-in needle shapes using the <b>needleShape</b> property: </p> <div class="row"> <div class="col-xs-4"> <label for="needle-shape"> needleShape </label> <input id="needle-shape" /><br /> <label for="needle-length"> needleLength </label> <input id="needle-length" /><br /> <br /> <label for="start"> startAngle </label> <input id="start" /><br /> <label for="sweep"> sweepAngle </label> <input id="sweep" /><br /> <label for="spacing"> tickSpacing </label> <input id="spacing" /><br /> </div> <div class="col-xs-4"> <div id="theRadialGauge"></div> </div> </div> <p> Or create custom needle shapes with the <b>createNeedleElement</b> method: </p> <div class="row"> <div class="col-xs-4"> <div id="customGauge1"></div> </div> <div class="col-xs-4"> <div id="customGauge2"></div> </div> <div class="col-xs-4"> <div id="customGauge3"></div> </div> </div> </div> </body> </html>
.wj-gauge { margin: 2em auto; width: 200px; height: 200px; } .wj-gauge .wj-needle { fill: orangered; stroke: orangered; } .wj-gauge .wj-needle .wj-inner-needle-cap { fill: white; } label { min-width: 100px; text-align: right; margin-right: 12px; } .wj-combobox { width: 150px; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.chart.map': 'npm:@grapecity/wijmo.chart.map/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.rest': 'npm:@grapecity/wijmo.rest/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);