| 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);
|
|
|
|
drawEnd
|
Event
|
|
The event is raised when the BarGauge finish rendering. Commonly used in combination with drawStart event.
Code examples
Bind to the drawEnd event 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} 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 drawStart event of jqxBarGauge.
|
|
initialized
|
Event
|
|
Fires when the jqxBarGauge is rendered for the first time. The BarGauge is initialized.
Code examples
Bind to the initialized event 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} 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 tooltipClose event 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 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 tooltipOpen event 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 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 valueChanged event 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} 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);
|
|
|
| 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);
|