Higchahrts单击整列以触发点击事件

时间:2016-03-11 09:21:15

标签: highcharts

以下是一个示例:http://jsfiddle.net/sxm38nsj/4/

当xAxis是一个字符串时,我可以得到点击点的索引。

但是当xAxis是datetime时,我该如何获得索引?或者我如何触发点击事件? 例如:http://jsfiddle.net/sxm38nsj/5/

$(function () {
    $('#container').highcharts({
      chart: {
        type: 'column',
        events: {
          click:function(e){
            var column = Math.abs(Math.round(e.xAxis[0].value));
            alert('bland:',column);
            this.series[0].data[column].firePointEvent('click', event);
          }
        }
    },

    xAxis: {
       type: 'datetime'
    },

    plotOptions: {
        column: {
            //pointPadding: 0.2,
            //borderWidth: 0
            point:{
                events:{
                click: function(){
                    alert(this.x);
                    console.log(this);
                }
              }
            }
        }
    },
    series: [{data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000 // one day
        }]
  });
});

1 个答案:

答案 0 :(得分:1)

您可以使用内置方法series.searchPoint()查找与鼠标(或更确切地说是事件)位置最近的点,例如:http://jsfiddle.net/sxm38nsj/6/

chart: {
  type: 'column',
  events: {
    click: function(e) {
      var chart = this;

      point = chart.series[0].searchPoint(chart.pointer.normalize(e));
      if (point) {
        point.firePointEvent('click', event);
      }
    }
  }
},

另一种解决方案是找到与column值最接近的点。您可以搜索series.xData数组,以获取与鼠标事件最近的点的索引。