解决highchart滚动条的问题

为何需要滚动条

x或y轴数据特别多时, 一个版面排不下

配置方法

1. 引入 highstock.js （而不是 highchart.js）
2. 设置 scrollbar.enabled = true （表示启用滚动条）
3. 设置 xAxis.max，表示可视区域最多展现多少个数据点
   

• 问题1 这样配置以后, 滚动条是有了, 但是存在个问题, 这个滚动条无论你数据多少, 都会存在.
  
• 问题2 当设置了xAxis.max的值为10, 那么可视区域永远显示10个x轴的位置, 如果没有统计数据, 将用数字补位..
  

解决办法

看了网上的几种解决方案, 结合我自己的案例, 说一下我的解决办法, 可能不是最佳方法

假设现在x轴数据过多, 我在highchart初始化之前, 设定一些变量, 首先, 我们在后台获得x轴的数据之后, 对x轴数据的集合进行长度的判断:

var xList = ...(后台获得数据, json串之类);var max_m = 10;   // 默认可视区域的x点个数if (xList && xList.length < max ) {    // 判断xList长度来解决上述问题2    max_m = xList.length;}// 同样道理解决问题1var flag = false; // 设置一个滚动条的开关,默认情况下关闭if (max_m >= 10) {    flag = true;}var chart = new Highcharts.Chart('container', {    title: {        text: '不同城市的月平均气温',        x: -20    },    subtitle: {        text: '数据来源: WorldClimate.com',        x: -20    },    xAxis: {        categories: xList,        // 解决问题2        max : max_m    },    scrollbar: {        //解决问题1        enabled: flag    },    ....

参考资料

http://wenda.hcharts.cn/question/144