HighChart：如何从plotBands获取精确的点/时间戳点击 [英] HighChart: How to get exact point / timestamp from plotBands click

问题描述

我点击了Yellow PlotBands区域，而2010年1月3日星期日突出显示。我想在下面的点击事件中抓取该日期。

---

解决方案

找到了！ this.options.value

  const formatPlotLine = _.curry图表，颜色，警报）=> {
 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）; 
} 
} 
} 
  

I clicked in the Yellow PlotBands area while Sunday, Jan 3, 2010 was highlighted. I want to be able to grab that date in the click event below.

---

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

Below you can see the click function with a simple log of the 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
        }]
    });
});

And this is all it prints out, I'm trying to find the exact point / epoch that the user clicked on. The only key that makes sense is timeStamp:2840.135 however that doesn't tell me anything.

解决方案

Found it! 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);
            }
        }
    }

这篇关于HighChart：如何从plotBands获取精确的点/时间戳点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！