highcharts趋势图上的点实现点击执行事件

日期:2015年9月07日      标签:前端

我们经常会用hightcharts的趋势图来显示随着时间推移某个参数的变化情况,如果做环境监控,可能是温度、湿度、光强等数据,如果是做网络监控,那这个参数可能是响应时间、故障率等。总之我们用折线图就是为了直观的显示这些参数的一个连续变化情况,同时如果参数存在很明显的跳变我们也能及时的发现,有时候我们可能需要让highcharts和其他的一些web元素联动,比如当我们看到某个参数值突然升高了,我们想点击最高的那个点,从而web上展现这个点当前时间的一个更加详细的情况。

下面是一副监控响应时间的highcharts图:

mahua

下面说正题了,到底怎么做呢? 首先打开highcharts的API文档,如果你能访问官网的话可以直接去官网http://www.highcharts.com,如若不行也没关系,可以访问中文站点http://www.hcharts.cn/api/index.php。本文就以中文站点为例进行说明,在Api手册的左侧列出了一系列的属性名,我们依次点开plotOptions -> series -> events可以看到支持的事件,我们可以选择mouse事件也可以直接选择click事件,下面是示例代码:

 plotOptions: {
    series: {
        cursor: 'pointer',
        events: {
            click: function (e) {
                alert('X的值为:' + e.point.x
                +',' + 'Y的值为:' + e.point.y);
            }
        }
    }
 },

将这段代码放到配置中就可以实现点击图上的点alert出x和y的值了,拿到值之后我们可以做自己想做的事情了。 具体的配置信息可以看我为这篇博文写的demo:http://codepen.io/anon/pen/NGqPOo

(正文完)



© 喻小右 2016 京ICP备15064386号-1