Highcharts在使用时需要准确宽和高,有时不能获父容器的准确的高度,所以采用滚动条代替。增大美观度。
Highcharts图表添加滚动条的方法
给图表添加滚动条这是很常见的需求,小伙伴也经常问到实现方法,这里分享如下:
实现办法:
1. 引入 highstock.js (而不是 highchart.js)
2. 设置 scrollbar.enabled = true (表示启用滚动条)
3. 设置 xAxis.max,表示可视区域最多展现多少个数据点(很关键)
完成上述三个步骤后,就可以看到效果了,如下图
对应的代码见: http://code.hcharts.cn/hcharts.cn/hhhGTX
几点小提示:
1、highstock.js 是完全包含 highcharts.js 的,所以一些 highcharts 不具有的特性(滚动条等)完全可以通过换用 highstock来实现
2、本例中的 xAxis.max 和 xAxis.min 默认展示 x 轴大值及最小值的,用于控制滚动条及可视区域的
-------------
本文内容源自 Highcharts中文论坛
实现办法:
1. 引入 highstock.js (而不是 highchart.js)
2. 设置 scrollbar.enabled = true (表示启用滚动条)
3. 设置 xAxis.max,表示可视区域最多展现多少个数据点(很关键)
完成上述三个步骤后,就可以看到效果了,如下图
对应的代码见: http://code.hcharts.cn/hcharts.cn/hhhGTX
几点小提示:
1、highstock.js 是完全包含 highcharts.js 的,所以一些 highcharts 不具有的特性(滚动条等)完全可以通过换用 highstock来实现
2、本例中的 xAxis.max 和 xAxis.min 默认展示 x 轴大值及最小值的,用于控制滚动条及可视区域的
-------------
本文内容源自 Highcharts中文论坛