answered 2022-10-17 15:35:34 +0800

hawk
3205 ● 1 ● 5
http://hawkphoenix.blogsp...

updated 2022-10-18 12:04:56 +0800

There are several ways to handle large data:

show horizontal scrollbar

give a large width and allow overflow-x:

<charts id="chart" type="line"  width="3000"/>
<style>
    .z-charts{
        overflow-x: auto !important;
    }
</style>

enable x-axis zoom

You can select a range by drag and drop to zoom in.

chart.setZoomType("x");

See https://github.com/zkoss/zkchartsessentials/blob/master/src/main/webapp/event/events.zul

load data of 1 page one time

You need to define the size of data points for 1 page.

1. just load 1-page of data at the beginning.
2. create 2 buttons for next and previous page
3. when users click paging buttons, load the corresponding page of data

change x extremes range

1. load all the data
2. set x data range by chart.getXAxis().setExtremes(1, 10); so it only shows those points in 1~10
3. create 2 buttons for next and previous page
4. when users click paging buttons, change x data extremes to a different range