| Name | Type | Default |
|---|---|---|
| animationDuration | number | 1000 |
|
Determines the animation in milliseconds. To disable this property - set it to 0 (zero). /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} animationDuration={500}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| backgroundColor | string | #e0e0e0 |
|
Sets or gets the jqxBarGauge background color. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} backgroundColor={'red'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| barSpacing | number | 4 |
|
Sets or gets the space between the segments of the jqxBarGauge. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} barSpacing={12}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| baseValue | number | null |
|
Sets the base value of jqxBarGauge. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} baseValue={30}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| colorScheme | string | scheme01 |
|
Sets the jqxBarGauge's color palette. jqxBarGauge suppports 27 color schemes from 'scheme01' to 'scheme27'. I's possible to set custom scheme in combination with "customColorScheme" property. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} colorScheme={'scheme02'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| customColorScheme | BarGaugeCustomColorScheme | scheme01 |
|
Interface BarGaugeCustomColorScheme {
name?: string; colors?: Array<string>; } Sets custom color palette in the BarGauge. This is used in combination with "colorScheme" property. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} colorScheme={'scheme'}
customColorScheme={{"name":"scheme","colors":["#FFCF5E","#E83C64","#FF60B9","#52BDE8"]}}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| disabled | boolean | false |
|
Sets or gets the values of the disabled property of jqxBarGauge. By default is false. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} disabled={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| endAngle | number | 0 |
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} endAngle={180}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| formatFunction | (value?: number | string, index?: number, color?: string) => string | null |
|
Sets or gets the formatFunction of the BarGauge. Used to make changes on the particular segment. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
constructor(props: {}) {
super(props);
this.state = {
formatFunction: (): any => {
return 'red';
}
}
}
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} formatFunction={this.state.formatFunction}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| height | string | number | 400 |
|
Sets or gets the BarGauge's height. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| labels | BarGaugeLabels | null |
|
Interface BarGaugeLabelsFont {
color?: string; size?: number | string; family?: string; } Interface BarGaugeLabels { connectorColor?: string; connectorWidth?: number; font?: BarGaugeLabelsFont; formatFunction?: (value?: number, index?: number) => string; indent?: number; precision?: number; visible?: boolean; } This property is used to make fine settings on BarGauge labels at each segment. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
constructor(props: {}) {
super(props);
this.state = {
labels: {
connectorColor: 'red',
connectorWidth: 1,
font: { color: 'darkseagreen', size: 12 },
formatFunction: function (value, index) {
return value + ' USD';
},
indent: 15,
precision: 1,
visible: true
}
}
}
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} labels={this.state.labels}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| max | number | string | 100 |
|
Sets or gets the end value of BarGauge. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={60} values={[102, 115, 130, 137]}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| min | number | 0 |
|
Sets or gets BarGauge's min. This property specifies the beggining of the BarGauge's scale. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} min={-25}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| relativeInnerRadius | number | string | 0.3 |
|
Sets or gets the relativeInnerRadius of jqxBarGauge. It's value represents the proportion between inner and outer radius. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} relativeInnerRadius={0}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| rendered | () => void | null |
|
This function is called when the BarGauge is initialized and the binding is complete. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
constructor(props: {}) {
super(props);
this.state = {
rendered: (): any => {
alert('rendered!')
}
}
}
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} rendered={this.state.rendered}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| startAngle | number | 225 |
|
Sets or gets the startAngle of the BarGauge. Used to create geometry of the arc in the space. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} startAngle={200}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| title | BarGaugeTitle | null |
|
BarGaugeHorizontalTitleAlignment: "left" | "center" | "right"
BarGaugeVerticalTitleAlignment: "top" | "bottom" Interface BarGaugeTextFont { color?: string; family?: string; opacity?: number; size?: number | string; weight?: number; } Interface BarGaugeTitleMargin { bottom?: number; left?: number; right?: number; top?: number; } Interface BarGaugeTitleSubtitle { text?: string; font?: BarGaugeTextFont; } Interface BarGaugeTitle { text?: string; font?: BarGaugeTextFont; horizontalAlignment?: BarGaugeHorizontalTitleAlignment; margin?: BarGaugeTitleMargin; subtitle?: BarGaugeTitleSubtitle; verticalAlignment?: BarGaugeVerticalTitleAlignment; } Sets or gets the BarGauge's title. This property can be string or object with custom title settings. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
constructor(props: {}) {
super(props);
this.state = {
title: {
text: 'Ranking',
font: { color: 'rosybrown', size: 25 }
}
}
}
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} title={this.state.title}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| tooltip | BarGaugeTooltip | null |
|
Interface BarGaugeTooltip {
classname?: string; formatFunction?: (value?: number | string, index?: number, color?: string) => string; visible?: boolean; precision?: number; } Sets or gets the BarGauge's tooltip. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
constructor(props: {}) {
super(props);
this.state = {
tooltip: {
classname: 'myTooltip',
visible: true,
precision: 0,
formatFunction: function (value, index) {
return value + ' USD';
}
}
}
}
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} tooltip={this.state.tooltip}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| useGradient | boolean | true |
|
Sets or gets useGradient of the BarGauge. Change visualization of the segments between flat color or with gradient. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]} useGradient={false}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| values | Array<number> | [] |
|
Sets or gets array of values for the BarGauge. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| width | string | number | 400 |
|
Sets or gets the BarGauge's width. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Events |
||
| drawEnd | Event | |
|
The event is raised when the BarGauge finish rendering. Commonly used in combination with drawStart event. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge} onDrawEnd={this.onDrawEnd}
width={600} height={600} max={150} values={[102, 115, 130, 137]}
/>
);
}
private onDrawEnd(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| drawStart | Event | |
|
The event is raised when the BarGauge starts rendering again. Commonly used in combination with drawEnd event. Code examples
Bind to the
|
||
| initialized | Event | |
|
Fires when the jqxBarGauge is rendered for the first time. The BarGauge is initialized. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge} onInitialized={this.onInitialized}
width={600} height={600} max={150} values={[102, 115, 130, 137]}
/>
);
}
private onInitialized(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| tooltipClose | Event | |
|
Fires when a BarGauge's tooltip is closed. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public componentDidMount(): void {
this.myBarGauge.current!.setOptions({ tooltip: { visible: true } });
}
public render() {
return (
<JqxBarGauge ref={this.myBarGauge} onTooltipClose={this.onTooltipClose}
width={600} height={600} max={150} values={[102, 115, 130, 137]}
/>
);
}
private onTooltipClose(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| tooltipOpen | Event | |
|
Fires when a BarGauge's tooltip is open. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public componentDidMount(): void {
this.myBarGauge.current!.setOptions({ tooltip: { visible: true } });
}
public render() {
return (
<JqxBarGauge ref={this.myBarGauge} onTooltipOpen={this.onTooltipOpen}
width={600} height={600} max={150} values={[102, 115, 130, 137]}
/>
);
}
private onTooltipOpen(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| valueChanged | Event | |
|
Fires after the values are changed. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public render() {
return (
<JqxBarGauge ref={this.myBarGauge} onValueChanged={this.onValueChanged}
width={600} height={600} max={150} values={[102, 115, 130, 137]}
/>
);
}
private onValueChanged(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Methods |
||
| Name | Arguments | Return Type |
| refresh | None | |
|
Refreshes the BarGauge. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public componentDidMount(): void {
this.myBarGauge.current!.refresh();
}
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| render | None | |
|
Renders the BarGauge contents. This method completely refreshes the BarGauge. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public componentDidMount(): void {
this.myBarGauge.current!.render();
}
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| val | value | |
|
Returns an array of the BarGauge values. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxBarGauge, { IBarGaugeProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbargauge';
class App extends React.PureComponent<{}, IBarGaugeProps> {
private myBarGauge = React.createRef<JqxBarGauge>();
public componentDidMount(): void {
this.myBarGauge.current!.val([30, 80, 120]);
}
public render() {
return (
<JqxBarGauge ref={this.myBarGauge}
width={600} height={600} max={150} values={[102, 115, 130, 137]}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||