研究了一下Highcharts有关x轴点击事件的方法,官网api上说明:events{setExtremes:},无详细示例,去英文网站(http://highcharts.uservoice.com/forums/55896-general/suggestions/1805901-xaxis-yaxis-mouse-events),这篇文章说明了解决方法,我去研究了一下,果然可以。关键代码如下:
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: '值:' + this.y +':<br/>时间:'+
Highcharts.dateFormat('%Y-%m-%e %H:%M:%S', this.x),
width: 200
});
window.setTimeout(function(){
var src = "<%= path%>/singins.do?method=forwardToColumn"; //柱状图页面
var title = "柱状图页面";
var returnVal = oncl_openWin(src,title,"30","300","480","840");
window.location.reload();
},1000); //一秒钟后跳转
}
}
},
marker: {
lineWidth: 1
}
}
},
Windows.showModalDialog方法:
function oncl_openWin(src,title,dtop,dleft,dheight,dwidth){
var rtObj =window.showModalDialog(src+"&random="+Math.random(),title,
"status:no;dialogTop:"+dtop+"px;dialogLeft:"+dleft+"px;dialogHeight:"+dheight+"px;dialogwidth:"+dwidth+"px;scroll=yes");
return rtObj;
}
效果是点击图表上某个点,数据显示1秒钟后跳转到柱状图页面。这样,采取了另外一个方法实现x时间点点击跳转。至今好像直接在xAxis里设置events属性,无任何反应。
Highcharts柱状图中的
xAxis: {
categories: [
]
},
要实现动态数据获取,可以直接定义一个js数组,用Jquery动态从后台取数据之后,push到数组中就行了,关键代码如下:
var url = "<%=basePath%>/singins.do?method=getDataToColumnJson";
$.ajax({
url: url,
type: "post",
cache: false,
dataType: "json",
data: {},
ifModified: false,
success: function(result){
var xdata= [];
jQuery.each(result, function(m, obj) {
xdata.push(m+1); //动态取值
});
options.xAxis.categories = xdata; //push完之后赋值
chart = new Highcharts.Chart(options);
}
});
- 大小: 19.5 KB
- 大小: 58.5 KB
分享到:
相关推荐
像任何其他Highcharts模块(例如,导出)一样,在Highcharts脚本标记下添加指向grouped-categories.js [removed]标记。 对于NPM用户: var Highcharts = require('highcharts'), HighchartsGroupedCategories = ...
highcharts 动态指定 x y数据
java实现的highcharts与ajax结合动态实时获取数据更新图表
Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图 后台代码大家根据自己的情况写并转JSON格式。在前台修改url,即可出柱形图
Highcharts 可用的js动态报表js库及demo
该项目主要是使用.NET MVC 和Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图,让数据更加的明显美观,可以满足绝多数数据报表的需求!
highcharts-axis-labels-shorten 这是一个用于 Highcharts 的插件,用于缩短 x 轴上的标签并在标签过多时跳过一些标签。 跳过和缩短标签时,插件会尊重字体系列和字体大小设置。 免责声明:此插件仅适用于 svg ...
jquery Highcharts jquery Highcharts jquery Highcharts
强大的highcharts 内置php+mysql饼状图动态开发实例 及各种曲线 柱状图 饼状图示例!
报表显示 highcharts 报表显示 highcharts 报表显示 highcharts
HighCharts---Ajax-数据 动态获取 HighCharts 数据 漂亮的包装 以json形式获取数据,并插入到HighCharts
highcharts读后台php,生成动态图表.php文件可以根据需要改写,从数据库中读取实时数据.很适合生成动态监控系统或实时交易系统的网页,生成的图表可以毫无问题的在移动设备上显示。
jQuery及highcharts做cpu动态走势图,https://blog.csdn.net/qq_40374604/article/details/83578837,有问题请留言
jquery highcharts动态加载多条数据表走势图代码 jquery highcharts动态加载多条数据表走势图代码 jquery highcharts动态加载多条数据表走势图代码
HighChartS cpu利用率动态图(Java版)
Highcharts-2.3.5 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线...
能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用,通过本文给大家介绍Highcharts使用简例及异步动态读取数据的相关知识,感兴趣的朋友一起学习吧
动态报表 jquery报表 报表 图形报表,饼状图,柱状图,线形图,综合显示图,动态显示哟!
Highcharts选项配置详细说明文档