javascript - Highcharts : How to get exact point/timestamp from plotBands click

Question

我单击了黄色 PlotBands 区域，同时突出显示了 2010 年 1 月 3 日星期日。我希望能够在下面的点击事件中获取该日期。

<小时/>

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

下面您可以看到click函数以及事件的简单日志

$(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 但这并没有告诉我任何信息。

Answer 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);
            }
        }
    }