问题
在前端以曲线图的形式展示数据时,由于数据往往较多,常常会在x轴添加滚动条(highstock),如果不进行相关设置的话,滚动条的初始位置在x轴的最左端,如图:
但最新的数据往往显示在图的最右边,那么如何设置滚动条的初始位置在最右边呢?
解决
滚动条的位置与两个参数有关:xAxis中的min(最小值)、max(最大值)。
如果一共有100个数据,想要滚动条初始显示50-55的数据(如图),那么就设置:
xAxis: [{
min : 50, //滚动条左端点的坐标
max : 55 //滚动条右端点的坐标
}]
效果如图:
如果想要滚动条初始位于右端,显示最新的数据,那么需要两个参数:
dataNum:数据的总数量。
showNum:滚动条的长度,也就是页面上当前显示数据的数量。
xAxis: [{
min : dataNum - showNum, //滚动条左端点的坐标
max : dataNum //滚动条右端点的坐标
}]
滚动条的初始位置就变成了位于最右边。
注意
min, max的取值不要超过已有数据的范围,如果超过highcharts会自动用空数据补全,非常丑!