繁体   English   中英

Highstock / Highchart图上的单击事件

[英]Click event on Highstock / Highchart plot

单击图表中的条形图(Highstock垂直条形图)后,我试图触发功能,这是文档:

http://api.highcharts.com/highstock#chart.events.click

click: Function
Fires when clicking on the plot background. The this keyword refers to the chart object itself. One parameter, event, is passed to the function. This contains common event information based on jQuery or MooTools depending on which library is used as the base for Highcharts.

Information on the clicked spot can be found through event.xAxis and event.yAxis, which are arrays containing the axes of each dimension and each axis' value at the clicked spot. The primary axes are event.xAxis[0] and event.yAxis[0]. Remember the unit of a datetime axis is milliseconds since 1970-01-01 00:00:00.

click: function(e) {
    console.log(
        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', e.xAxis[0].value), 
        e.yAxis[0].value
    )
}

这是我的图表配置:

plotOptions: {
    series: {
        animation: enableAnimation,
            cursor: 'pointer',
            point: {
            events: {
            click: function(event) {
                log("Click!")                       
                log(event.yAxis[0].value);
                log(event.xAxis[0].value);
            }
        }
    }
}

问题是第2个和第3个log()从未执行过,因为“事件”对象不包含yAxis或xAxis值,我编写了一个函数来探索对象的属性:

function exploreObj(param, offset)
            {
                log("%% "+param);
                for (var property in param)
                {

                    log(offset + property+": "+param[property]);
                    //exploreObj(property,offset+"-");
                }
            }

有什么建议吗? 如何访问单击栏的值?

在这一点上,它应该是this.x / this.y值而不是事件。

http://api.highcharts.com/highstock#chart.events.click

使用此方法解决:

var start_t = 0;
                        var end_t = 0;

                        var point = event.point;
                        var points = event.point.series.points;
                        var index = points.indexOf(point);
                        var index_next = index+1;
                        start_t = point.x;
                        if(index_next==points.length)
                        {
                            index_next=points.length-1;
                            end_t = points[points.length - 1].x;
                        }
                        else
                        {
                            //Is not the last
                            var next_point = points[index_next]
                            end_t = next_point.x;
                        }

                        var period =
                        {
                            from: start_t,
                            to: end_t
                        };
...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM