| Name | Type | Default |
|---|
|
renderEngine
# |
DrawRenderEngine
|
''
|
DrawRenderEngine: "SVG" | "VML" | "HTML5"
Determines the rendering engine used to display the chart. Possible values are 'SVG', 'VML' and 'HTML5'. When the property is not set jqxDraw will automatically select an optimal rendering engine depending on the browser capabilities.
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} renderEngine={'HTML5'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
theme
# |
String
|
''
|
import { createRoot } from "react-dom/client";
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, {
fill: 'lightblue',
stroke: 'darkblue'
});
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, {
cy: circleY + (moveUp ? -10 : 10)
});
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
}, []);
return <JqxDraw ref={myDraw} style={{
width: 850,
height: 500
}} theme={'material'} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
|
|
|
| Name | Arguments | Return Type |
|---|
|
attr
# |
element, attributes
|
|
Sets attributes of an element
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const textElement = myDraw.current!.text(
'Drawing shapes',
35,
20,
undefined,
undefined,
0,
{ class: 'largeText', fill: 'yellow', stroke: 'orange' },
false,
'center',
'center',
'centermiddle'
);
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.attr(textElement, { fill: 'lightblue', stroke: 'darkblue' });
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
circle
# |
cx, cy, r, attributes
|
|
Creates a circle element
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.circle(85, 300, 50, {});
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
clear
# |
None
|
|
Clears the content of the jqxDraw widget
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.clear();
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
getAttr
# |
element, attributes
|
|
Gets element's attribute
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.getAttr(circleElement, 'fill');
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
getSize
# |
None
|
|
Method: getSize
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.getSize();
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
line
# |
x1, y1, x2, y2, attributes
|
|
Creates a line element
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.line(85, 100, 85, 200, { stroke: 'blue', 'stroke-width': 6 });
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
measureText
# |
text, angle, attributes
|
|
Estimates the size of a text element
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.measureText('My text', 45, { class: 'smallText' });
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
on
# |
element, event, func
|
|
Adds an event handler to an element
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(circleElement, 'click', () => {
alert('Clicked The Big Circle!');
});
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
off
# |
element, event, func
|
|
Removes an event handler from an element
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.off(pathDown, 'click', moveCircle(false));
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
path
# |
path, attributes
|
|
Creates a path element
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.path('M10 160 L 160 160 L80 320 Z', {
fill: 'transparent',
stroke: 'blue',
'stroke-width': 1
});
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
pieslice
# |
cx, xy, innerRadius, outerRadius, fromAngle, endAngle, centerOffset, attributes
|
|
Creates a pie slice element
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.pieslice(50, 350, 50, 100, 15, 95, 0, { fill: 'yellow' });
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
refresh
# |
None
|
|
Refreshes / re-draws the content of the jqxDraw widget
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.refresh();
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
rect
# |
x, y, width, height, attributes
|
|
Creates a rectangle element
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.rect(20, 280, 130, 50, { stroke: 'blue', fill: 'transparent' });
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
saveAsJPEG
# |
image, url
|
|
Exports the content as JPEG image
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.saveAsJPEG('myImage.jpeg', 'http:///export_server/server.php');
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
saveAsPNG
# |
image, url
|
|
Exports the chart's content as PNG image
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.saveAsPNG('myImage.png', 'http:///export_server/server.php');
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
|
text
# |
text, x, y, width, height, angle, attributes, clip, halign, valign, rotateAround
|
|
Creates a text element
import { createRoot } from 'react-dom/client';
import { useEffect, useRef } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
function App() {
const myDraw = useRef<JqxDraw>(null);
useEffect(() => {
const circleElement = myDraw.current!.circle(85, 150, 50, {});
myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
const circleUp = myDraw.current!.circle(50, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathUp = myDraw.current!.path('M30 460 L 70 460 L50 430 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
const circleDown = myDraw.current!.circle(120, 450, 30, {
fill: '#DEDEDE',
stroke: '#777777'
});
const pathDown = myDraw.current!.path('M100 440 L 140 440 L120 470 Z', {
fill: 'transparent',
stroke: '#777777',
'stroke-width': 1
});
myDraw.current!.text('Click these buttons:', 20, 390);
const moveCircle = (moveUp: boolean) => {
const circleY = parseInt(myDraw.current!.getAttr(circleElement, 'cy'));
myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) });
};
myDraw.current!.on(circleUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(pathUp, 'click', () => {
moveCircle(true);
});
myDraw.current!.on(circleDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.on(pathDown, 'click', () => {
moveCircle(false);
});
myDraw.current!.text(
'Some More Text!',
30,
280,
undefined,
undefined,
0,
{ class: 'largeText', fill: 'blue', stroke: 'blue' },
false,
'center',
'center',
'centermiddle'
);
}, []);
return <JqxDraw ref={myDraw} style={{ width: 850, height: 500 }} />;
}
createRoot(document.querySelector('#app') as HTMLElement).render(<App />);
|
