highstock使用两天小结

  这两天因为工作的需要，又让我玩起了前端，其中highstock便是其中一部分，绘图工具除此之外echart也是提供绝大数图形显示，但是echart在数据点数量达到万级别以上效率会渐渐被highstock甩开，甚至会出现浏览器未响应的情况。

  但是相对echart而言，highstock的文档对于英文不熟练的开发者来说有点晦涩，不是很直观，这也导致我一开始看API的时候有点吃力。

  粗略记录下，这两天遇到的问题以及自认为highstock特点：

  特点1：绘图的数据为空时，如何友好提示？

   这个功能除了引用highstock必须引入的js之外还需额外引入另一个JS：no-data-to-display.js官方地址,使用方式如下：

//全局设置
Highcharts.setOptions({
        lang: {
            noData: "条件范围内没有数据!"
        }
    });

特点2：图表点击事件，这个功能很普遍，为什么拿出来说，是因为图区域与series点点击获取X轴、Y轴值的方式不同，具体代码如下所示：

//区域内点击事件获取X、Y轴数据方式：
chart:{
                events: {
                        //点击事件，根据选中情况赋值
                        click: function(e) {
                        //寻找到哪个check处于激活状态
                              var xValue=e.xAxis[0].value;
                              var yValue=e.yAxis[0].value;
                    }}
            }
//series点击事件获取X、Y轴数据方式：
series: [{
                data: picData,
                events: {
                    //点击事件，根据选中情况赋值
                    click: function(e) {
                            var xValue=e.point.x;
                            var yValue=e.point.y;
             
                    }}
            }],

  特点3：在图中添加标示线，上面的特点中，我们可以根据点击获取到X、Y轴的值，根据这些值，可以动态的为图标添加或者删除标示线。代码如下所示：

//根据标示线的ID删除指定标示线
chart.yAxis[0].removePlotLine('yAxis1');
//新增标示线
chart.yAxis[0].addPlotLine({
      value: limitValue,//Y轴指定的值，绘制出与X轴平行的线条
      dashStyle: 'dash',//线条的表现形式，solid实线，此处我用的虚线
      width: 1,//线条的宽度
      color: '#A52a2a',//线条的颜色
      id: 'yAxis1'//指定ID，后期如果需要动态删除的时候，根据ID便可轻易的删除
});
//同理X轴的标示线跟Y轴一样，可以类推

除了上面的三个特点之外，还遇到了几个小问题。

问题1：时间轴与实际传入的数据不一致，准确的来说，时间轴相对传入的时间戳少了8小时，经过一番调查，是因为highstock默认使用国际标准时区，北京时间是+8，因此解决方法很简单，全局配置，将UTC配置为false，具体如下所示：

Highcharts.setOptions({
        global: {
            useUTC: false//取消默认时区
        }
 });

问题2：highstock有个比较奇怪的默认配置，就是Y轴的最大刻度不显示，起初我看了所有的官方示例都没有，但是highchart的示例却有最大刻度，一度让我以为highstock不支持呢，这次使用中才发现可以通过属性配置showLastLabel，具体代码如下所示：

 yAxis: {
           showLastLabel: true,//显示纵坐标最大值，highstock默认不显示最大值，即默认为false
           allowDecimals: false,//控制坐标值是否允许小数显示
     }

这两天的使用大概就遇到这些个小问题，其实仔细阅读官方文档，便可解决大多数问题。睡了睡了。