Browse Source

update example for print performaing

svg-version-test
vargburz 2 years ago
parent
commit
9b796ecc74
  1. 50
      examples/demo_vertical.html

50
examples/demo_vertical.html

@ -7,21 +7,29 @@
<script src="../dist/index.js" type="text/javascript"></script> <script src="../dist/index.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<div id="chart" style="width: 50%; height: 500px;"></div> <div id="charts">
</div>
<script type="text/javascript"> <script type="text/javascript">
const startTime = 1590590148; const startTime = 1590590148;
const arrayLength = 20; const arrayLength = 200;
const chartsNumber = 150;
const data1 = createDatapoints(arrayLength, startTime, 40); const data1 = createDatapoints(arrayLength, startTime, 40);
const data2 = createDatapoints(arrayLength, startTime, 30, 50); const data2 = createDatapoints(arrayLength, startTime, 30, 50);
const data3 = createDatapoints(arrayLength, startTime, 20, 90); const data3 = createDatapoints(arrayLength, startTime, 20, 90);
insertHtml(chartsNumber);
let options = { let options = {
renderLegend: false, renderLegend: false,
axis: { axis: {
y: { invert: true, valueFormatter: timeValueFormatter, format: 'custom', colorFormatter: colorFormatter }, y: { invert: true, valueFormatter: timeValueFormatter, format: 'custom', colorFormatter: colorFormatter, ticksCount: 6 },
x: { format: 'numeric' } x: { format: 'numeric' }
}, },
// grid: {
// y: { ticksCount: 2000 }
// },
zoomEvents: { zoomEvents: {
mouse: { mouse: {
pan: { isActive: true, orientation: 'vertical', keyEvent: 'shift' }, pan: { isActive: true, orientation: 'vertical', keyEvent: 'shift' },
@ -36,17 +44,8 @@
crosshair: { orientation: 'horizontal' }, crosshair: { orientation: 'horizontal' },
margin: { top: 30, right: 20, bottom: 20, left: 50 } margin: { top: 30, right: 20, bottom: 20, left: 50 }
} }
var pod = new LinePod(
document.getElementById('chart'),
[
{ target: 'test1', datapoints: data1, color: 'green' },
{ target: 'test2', datapoints: data2, color: 'blue' },
{ target: 'test3', datapoints: data3, color: 'orange' },
],
options
);
pod.render();
multileRender(chartsNumber);
function zoomIn(ranges) { function zoomIn(ranges) {
const range = ranges[1]; const range = ranges[1];
@ -85,6 +84,31 @@
} }
return 'black'; return 'black';
} }
function insertHtml(chartsNumber) {
let chartsHtml = '';
for(let i = 1; i <= chartsNumber; i++) {
chartsHtml += `<div id="chart-${i}" style="height: 640px; width: 880px"></div>`;
}
document.getElementById('charts').innerHTML = chartsHtml;
}
function multileRender(chartsNumber) {
for (let i = 1; i <= chartsNumber; i++) {
const pod = new LinePod(
document.getElementById(`chart-${i}`),
[
{ target: 'test1', datapoints: data1, color: 'green' },
{ target: 'test2', datapoints: data2, color: 'blue' },
{ target: 'test3', datapoints: data3, color: 'orange' },
],
options
);
pod.render();
}
}
</script> </script>
</body> </body>
</html> </html>

Loading…
Cancel
Save