Highcharts xAxis events事件 categories动态取值

 
 

 

 

          研究了一下Highcharts有关x轴点击事件的方法，官网api上说明：events{setExtremes:}，无详细示例，去英文网站(http://highcharts.uservoice.com/forums/55896-general/suggestions/1805901-xaxis-yaxis-mouse-events)，这篇文章说明了解决方法，我去研究了一下，果然可以。关键代码如下：

 plotOptions: {
                  series: {
                      cursor: 'pointer',
                      point: {
                          events: {
                              click: function() {
                                  hs.htmlExpand(null, {
                                      pageOrigin: {
                                          x: this.pageX,
                                          y: this.pageY
                                      },
                                      headingText: this.series.name,
                                      maincontentText: '值：' + this.y +':<br/>时间：'+
                                          Highcharts.dateFormat('%Y-%m-%e %H:%M:%S', this.x),
                                      width: 200
                                  });
                                  window.setTimeout(function(){
                                         var src = "<%= path%>/singins.do?method=forwardToColumn"; //柱状图页面
                                         var title = "柱状图页面";
                                         var returnVal = oncl_openWin(src,title,"30","300","480","840");
                                         window.location.reload();  
                                  },1000);  //一秒钟后跳转
                              }
                          }
                      },
                      marker: {
                          lineWidth: 1
                      }
                  }
              },

 

          Windows.showModalDialog方法：

          function oncl_openWin(src,title,dtop,dleft,dheight,dwidth){
                 var rtObj =window.showModalDialog(src+"&random="+Math.random(),title,
    "status:no;dialogTop:"+dtop+"px;dialogLeft:"+dleft+"px;dialogHeight:"+dheight+"px;dialogwidth:"+dwidth+"px;scroll=yes");
                 return rtObj;
  } 

 

效果是点击图表上某个点，数据显示1秒钟后跳转到柱状图页面。这样，采取了另外一个方法实现x时间点点击跳转。至今好像直接在xAxis里设置events属性，无任何反应。

 

Highcharts柱状图中的

    xAxis: {
                   categories: [
                   ]
               },

要实现动态数据获取，可以直接定义一个js数组，用Jquery动态从后台取数据之后，push到数组中就行了，关键代码如下：

var url = "<%=basePath%>/singins.do?method=getDataToColumnJson";
       $.ajax({
            url: url,
            type: "post",
            cache: false,
            dataType: "json",
            data: {},
            ifModified: false,
            success: function(result){
                   var xdata= [];            
                   jQuery.each(result, function(m, obj) {
                           xdata.push(m+1); //动态取值
                   });
                options.xAxis.categories = xdata;  //push完之后赋值
                chart = new Highcharts.Chart(options);
           }
        });

 

评论

1 楼 LyAn_爱踢爱死 2014-04-03  

楼主，我这里突然出现一个问题， 就是 hs.htmlExpand(null, {....这段代码里的hs 被提示未定义了，之前都是可以的。 你能解释一下这个hs是什么东西吗？为什么叫hs