Compare commits
24 Commits
85ab6ad0aa
...
bebc1bbb86
Author | SHA1 | Date |
---|---|---|
|
bebc1bbb86 | 4 months ago |
|
b3e7f943ad | 7 months ago |
|
a8408a748c | 7 months ago |
|
6e6fa7dc8e | 7 months ago |
|
f67ce313dd | 8 months ago |
|
c1c3b77dac | 8 months ago |
|
53c233b969 | 8 months ago |
|
ebcb3185cd | 8 months ago |
|
6422b49bf0 | 8 months ago |
|
3f9342b5e1 | 8 months ago |
|
bb46fe79be | 8 months ago |
|
0c3b404155 | 8 months ago |
|
85cd952b9f | 8 months ago |
|
701feaaf2f | 8 months ago |
|
ebb49adf82 | 8 months ago |
|
f38829787c | 8 months ago |
|
6549415feb | 8 months ago |
|
117c0af469 | 8 months ago |
|
aac8f6f5ac | 9 months ago |
|
f4354d7a77 | 9 months ago |
|
529f439ac9 | 9 months ago |
|
121f7a0305 | 9 months ago |
|
7e721ab880 | 9 months ago |
|
3663d3eaaa | 9 months ago |
12 changed files with 358 additions and 126 deletions
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> |
||||
<meta content="utf-8" http-equiv="encoding"> |
||||
|
||||
<script src="../dist/index.dev.js" type="text/javascript"></script> |
||||
</head> |
||||
<body> |
||||
<div id="chart" style="width: 50%; height: 500px;"></div> |
||||
|
||||
<script type="text/javascript"> |
||||
let options = { |
||||
renderLegend: false, usePanning: false, |
||||
axis: { |
||||
x: { format: 'numeric', range: [0, 100] }, |
||||
y: { invert: true, range: [0, 100] }, |
||||
y1: { isActive: true, format: 'numeric', range: [0, 1000] }, |
||||
}, |
||||
zoomEvents: { |
||||
mouse: { zoom: { isActive: false, orientation: 'horizontal' } }, |
||||
scroll: { zoom: { isActive: false, orientation: 'horizontal' } } |
||||
}, |
||||
} |
||||
const data1 = [[0,0], [35, 40], [65, 60], [100, 100]]; |
||||
const data2 = [[0,0], [35, 50], [65, 65], [80, 100]]; |
||||
const data3 = [[0,0], [35, 20], [65, 50], [100, 80]]; |
||||
const data4 = [[0,900], [35, 800], [65, 700], [100, 600]]; |
||||
var pod = new LinePod( |
||||
document.getElementById('chart'), |
||||
[ |
||||
{ target: 'test1', datapoints: data1, color: 'green', renderArea: 'Above' }, |
||||
{ target: 'test2', datapoints: data2, color: 'blue', renderArea: 'Below' }, |
||||
{ target: 'test3', datapoints: data3, color: 'orange', renderArea: 'Below', yOrientation: 'right' }, |
||||
{ target: 'test4', datapoints: data4, color: 'purple', renderArea: 'Above', yOrientation: 'right' }, |
||||
], |
||||
options |
||||
); |
||||
pod.render(); |
||||
</script> |
||||
</body> |
||||
</html> |
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> |
||||
<meta content="utf-8" http-equiv="encoding"> |
||||
<script src="../dist/index.dev.js" type="text/javascript"></script> |
||||
</head> |
||||
<body> |
||||
<div id="chart" style="width: 50%; height: 500px;"></div> |
||||
<script type="text/javascript"> |
||||
const startTime = 1590590148; |
||||
const data = Array.from( |
||||
{ length: 20 }, |
||||
(el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 30)] |
||||
); |
||||
let options = { |
||||
renderLegend: false, usePanning: false, |
||||
axis: { y: { range: [0, 50] } }, |
||||
zoomEvents: { mouse: { |
||||
zoom: { isActive: false }, |
||||
pan: { isActive: false }, |
||||
} }, |
||||
eventsCallbacks: { contextMenu: (position) => console.log('contextMenu', position) } |
||||
} |
||||
var pod = new LinePod( |
||||
document.getElementById('chart'), |
||||
[{ datapoints: data }], |
||||
options |
||||
); |
||||
pod.render(); |
||||
</script> |
||||
</body> |
||||
</html> |
Loading…
Reference in new issue