2016-08-22 26 views
1

enter image description hereHighChart:如何從plotBands確切點/時間戳點擊

我在黃河PlotBands區域點擊,而週日,2010年1月3日得到了強調。我希望能夠在下面的點擊事件中獲取該日期。


http://jsfiddle.net/leongaban/a6hqx5eb/

下面你可以看到click功能用一個簡單的日誌event

$(function() { 
    var $report = $('#report'); 

    $('#container').highcharts({ 
     xAxis: { 
      plotBands: [{ // mark the weekend 
       color: '#FCFFC5', 
       from: Date.UTC(2010, 0, 2), 
       to: Date.UTC(2010, 0, 4), 
       events: { 
        click: function (e) { 
         console.log(e) 
         $report.html(e.type); 
        }, 
        mouseover: function (e) { 
         $report.html(e.type); 
        }, 
        mouseout: function (e) { 
         $report.html(e.type); 
        } 
       } 
      }], 
      tickInterval: 24 * 3600 * 1000, 
      // one day 
      type: 'datetime' 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4], 
      pointStart: Date.UTC(2010, 0, 1), 
      pointInterval: 24 * 3600 * 1000 
     }] 
    }); 
}); 

這是所有打印出來,我試圖找到確切點/用戶點擊的時代。唯一有意義的關鍵是timeStamp:2840.135然而,這並沒有告訴我任何東西。

enter image description here

回答

1

發現它! this.options.value

const formatPlotLine = _.curry((chart, color, alert) => { 
    return { 
     color: color, 
     value: toMilliseconds(alert.start_epoch), 
     width: 2, 
     id: 'alert-plotline', 
     events: { 
      click: function() { 
       // console.log('alert-plotline Clicked'); 
      }, 
      mouseover: function(e) { 
       this.axis.chart.get('x-axis-alert').addPlotLine({ 
        value: this.options.value, 
        color: 'red', 
        width: 4, 
        id: this.options.value 
       }); 

       let target = { 
        name: alert.term, 
        type: alert.type, 
        percent: Math.floor(alert.percent_change) 
       } 
       TooltipFactory.updateToolTipPoints('alert', target); 
      }, 
      mouseout: function(e) { 
       this.axis.chart.get('x-axis-alert').removePlotLine(this.options.value); 
      } 
     } 
    }