`
单一色调
  • 浏览: 86075 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

SSH+Highcharts 异步加载图表 ——在思考中解决问题(二)

阅读更多

之前曾写过一篇关于动态加载highcharts的文章

SSH+Highcharts 生成动态图表 ——在思考中解决问题

现在出现了几个问题:

1、之前的加载方式是先发送ajax请求给后台action,通过返回的data来构建图表,那么如果页面上有一个按钮的话要重新构建图表数据,是不是又要把一样的代码重新再写一遍呢?

这样太麻烦,也太不合理了。

那么继续查询highcharts API,发现在方法中有如下一个方法:

redraw ()
Since 1.2.0

Redraw the chart after changes have been done to the data or axis extremes. All methods for updating axes, series or points have a parameter for redrawing the chart. This is true by default. But in many cases you want to do more than one operation on the chart before redrawing, for example add a number of points. In those cases it is a waste of resources to redraw the chart for each new point added. So you add the points and call chart.redraw() after.
Returns    null

 

显而易见,这就应该是重构图表的方法,后面肯定需要用到这个方法。

 

2、找到了重构图表的方法,那么如何把值赋予图表呢?

通过继续查找api,发现Series中有一个setData方法,点进demo,发现有如下一个实例:

 $('#button').click(function() {
        var chart = $('#container').highcharts();
        chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4] );
    });

 通过chart.series[0].setData 可以给图表赋值,那么接下来问题就简单了。现贴上关键代码:

 

$(function() {
var adsChart;
adsChart = new Highcharts.Chart({
//......
series : [{name:'新用户'},{name:'老用户'},{name:'下载量'},{name:'安装量'}]
});
//给图表加载值
var url = '${pageContext.request.contextPath}/chartAction!getAdsChart.action';
$.post(url, function(response) {
	newList = response.newList;
	oldList = response.oldList;
	downList = response.downList;
	installList = response.installList;

	adsChart.series[0].setData(newList);
	adsChart.series[1].setData(oldList);  
	adsChart.series[2].setData(downList);
	adsChart.series[3].setData(installList);
}, "json");
});

 楼主这里有4条折线,所以构建4个series。

 

3、通过ajax方式这样可以初始化图表,那么点击按钮的时候如何刷新图表呢?

动态构建图表的地方不需要变,还是需要这样setData。

之前我们都是在按钮是给其添加onclick事件,然后调用函数,但是在这个地方好像不管用,fiebug会提示adsChart is undefined ,那么应该如何调用?

需要在$(function(){})内部中给按钮注册点击事件:

$('#btnAdsCharts').on('click',function(e){
adsChart.showLoading();
	var month = $('#MonthCombo').combobox('getValue');
	var url = '${pageContext.request.contextPath}/chartAction!getAdsChart.action';
	var data = {
		month : month
	};
	$.post(url, data, function(response) {
		newList = response.newList;
		oldList = response.oldList;
		downList = response.downList;
		installList = response.installList;

		adsChart.series[0].setData(newList);
		adsChart.series[1].setData(oldList);  
		adsChart.series[2].setData(downList);
		adsChart.series[3].setData(installList);
		adsChart.hideLoading();
                //重构图表
		adsChart.redraw();
	}, "json");
})

 

至此大功告成。

效果如图所示:

 

  • 大小: 27.1 KB
2
1
分享到:
评论

相关推荐

    jQuery+highcharts各种数据统计图表代码

    **jQuery + Highcharts 数据统计图表详解** 在网页开发中,数据可视化是不可或缺的一部分,它能够帮助用户快速理解和分析大量信息。jQuery 和 Highcharts 是两个非常流行且强大的工具,结合使用可以创建出各种复杂...

    dwz+thinkPHP+Highcharts

    开发者可能已经在xpcms中集成了一个DVR分析组的功能,用户可以通过点击来查看由Highcharts生成的图表,这些图表可能是对某种数据的统计分析结果,如网站访问量、用户行为等。 在安装或升级这个系统时,删除"Install...

    jquery+ajax+highcharts+mysql实战例子

    在本实践案例中,我们探讨的是如何利用jQuery、Ajax、Highcharts和MySQL这四个关键技术构建一个实时数据可视化应用。这个实例可能是一个员工数据统计系统,通过动态图表展示员工信息,便于管理和分析。 首先,...

    ssh 导入导出excel+百度富文本编辑器+highcharts

    在SSH项目中,highcharts可以用于展示数据统计结果,通过JavaScript与后台Java代码交互,获取数据后动态生成图表。开发者需要理解highcharts的API,设置图表类型、数据源、样式等参数,以满足不同场景下的数据可视化...

    ajax+jquery+highcharts+json

    实现一个简单ajax+jquery+highcharts+json例子,主要让初学者了解ajax+jquery是怎么接受后台传过来的json数据,并显示到前台highcharts中的,以及js文件应该如何放置等问题。

    基于JSONP+ngBind+ngRepea技术实战美玩网(BootStrap+AngularJS+JMS+Highcharts).rar

    分享课程——基于JSONP+ngBind+ngRepea技术实战美玩网(BootStrap+AngularJS+JMS+Highcharts);本教程主要从基础出发到项目的整体框架整合,整个大纲内容涉及面较为广泛,涉及到数据库技术,javaEE技术点,web框架...

    模仿花火基于react+Highcharts做的一款在线图表制作工具

    在IT行业中,数据可视化是一项至关重要的技能,它能够将复杂的数据转化为直观的图表,帮助用户更好地理解和解析数据。本文将详细介绍如何使用React和Highcharts这两个强大的工具模仿花火(Huahuo)创建一款在线图表...

    html+js+highcharts绘制圆饼图表的简单实例

    实例如下: <!DOCTYPE ...<... <head>...html+js+highcharts绘制圆饼图表的简单实例</title> <script type="te

    ext3.0+highcharts+ext时间日期控件+jquery+json

    标题中的"ext3.0+highcharts+ext时间日期控件+jquery+json"涉及到的是几个重要的前端开发技术和工具的组合。以下是对这些技术的详细解释: 1. **EXT3.0**:EXT是一个JavaScript库,用于构建富互联网应用程序(RIA)...

    ext3.0+highcharts 实际项目(前面资源更新)

    在本项目中,"ext3.0+highcharts 实际项目(前面资源更新)",开发者结合了两个强大的JavaScript库——EXT JS 3.0和Highcharts,来创建一个功能丰富的数据可视化应用。EXT JS是一个用于构建用户界面的前端框架,而...

    数据统计报表实时更新springmvc+ajax+highcharts

    在这个项目中,我们使用了SpringMVC、Ajax以及Highcharts这三种技术来实现一个动态更新的数据统计报表系统。 SpringMVC是Spring框架的一部分,是一个模型-视图-控制器(MVC)架构的Web应用框架。它负责处理HTTP请求...

    easyUI+HighCharts+Aspose.cells+Aspose.word+Aspose.Pdf+WebService大杂烩

    easyUI+HighCharts+Aspose.cells+Aspose.word+Aspose.Pdf+WebService等的实例应用,easyui包括异步树加载,嵌套表格等,highcharts包括本地导出图片(仅限jpg)柱状,线状图例等,aspose.word、excel、pdf等使用的...

    highcharts异步ajax可直接运行实例(java版)

    Highcharts是一款强大的JavaScript图表库,用于在Web应用中创建各种互动图表。这个"highcharts异步ajax可直接运行实例(java版)"是基于Java Web技术实现的一个具体项目,它展示了如何利用Highcharts与Java后端...

    python项目开发实战_招聘信息实时数据分析系统(网络爬虫+Flask+Highcharts+MySQL)_案例教程.pdf

    python项目开发实战_招聘信息实时数据分析系统(网络爬虫+Flask+Highcharts+MySQL)_编程案例实例课程教程.pdf

    静态网页设计大作业-基于JavaScript+html+css+highcharts实现安居客某小区房价走势图

    <项目介绍> ...3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 --------

    地区销售实时统计 kakfa+storm+hbase+servlet+highcharts

    在“地区销售实时统计”项目中,Highcharts用于将后台处理后的销售数据以图表形式展示出来,例如折线图、柱状图等,使得用户可以直观地了解各地区的销售趋势和业绩表现。 综合来看,这个项目提供了一个完整的实时...

    Highcharts多个图表共用一个提示框,每个图表多条曲线

    在这个特定的场景中,我们关注的是如何实现"Highcharts多个图表共用一个提示框,每个图表多条曲线"的功能。这通常涉及到对Highcharts API的深入理解和定制。 首先,我们要理解Highcharts的提示框(tooltip)是用于...

    Highcharts js生成图表

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它允许开发者轻松创建高质量、交互式的图表,如柱状图、折线图、饼图等。这款库以其灵活性、易用性和丰富的功能而受到赞誉。在本文中,我们将深入探讨...

    前端+图标+highcharts+图表示例应用

    high基础图表应用,快速应用了解highcharts

Global site tag (gtag.js) - Google Analytics