Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

Highcharts AJAX JSON 实现动态数据交互显示 JQuery 图表 柱形图 主要使用的JQuery AJAX JSON SpringMVC 基于之前的2篇框架添加的新功能


这是第一篇实例的步骤与代码。还有整个项目的结构图。

http://my.oschina.net/xshuai/blog/345117

原创的博文。转载注明出处。大家赶紧收藏吧。

本人highcharts新手。只是做个了练手的实例。还望大神指点。

上个图给大家看下效果。

点击 查看图表 如下图展示效果

  1. Highcharts简介

Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

2.Highcharts 中文API 实例网站

http://www.hcharts.cn/index.PHP---------------------中文官方网站

http://www.hcharts.cn/docs/index.PHP----------------中文教程

http://www.hcharts.cn/demo/index.PHP---------------在线演示

http://bbs.hcharts.cn/forum.PHP-----------------------中文论坛

3.下载highcharts 与使用

http://www.hcharts.cn/resource/index.php使用最新的就可以了。

http://www.hcharts.cn/docs/index.php?doc=start-download网站里面有详细的介绍每个文件夹的作用。

4.需要的文件 jquery 自己下载就好了

?
1
2
< script type = "text/javascript" src "${ctx}/js/jquery-1.10.2.js" ></ script >
"${ctx}/js/highcharts/highcharts.js" >

5.页面index.jsp增加的代码

2
3
4
5
6
7
8
9
10
HTML代码
a href "javascript:void(0);" id "highchart" onclick "gotoHighchart();" class "blank_btn" >查看图表</ a >
js代码
functiongotoHighchart(){
varurl='${ctx}/user/chartpage';
window.location.href=url;
}
操作当点击@R_182_404@面

6.Controller代码

6
@RequestMapping (value= "chartpage" )
@H_367_301@public Stringchartpage(HttpServletRequestrequest,
HttpServletResponseresponse){
return "views/user/chartpage" ;
}
与第 5 步的想对应。

7.所需要的页面代码 chartpage.jsp

5
body >
div "container" style "width:800px;height:400px;margin:0auto" div >
</ 以上实现了页面跳转的功能。需要图表的数据。还得继续

8.图表需要的数据方法

8.1Controller

接受service传递json的字符串给页面

10
11
12
13
14
15
@H_502_420@"/chart" Stringchart(HttpServletRequestrequest,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-size:1em!important; min-height:inherit!important; background:none!important">HttpServletResponseresponse) @H_367_301@throws Exception{
Stringresult= @H_367_301@null try {
result=userService.chart();
} @H_367_301@catch (Exceptione){
if (log.isErrorEnabled()){
log.error( "查询列表失败" ,e);
}
result= ;
}
StringUtil.writeToWeb(result, "html" return ;
}

8.2Service

将list对象存入map中。并转为json字符串数组

14
/**
*highcharts用的
*@Title:chart
*@Description:直接转出JSON传递给前台页面接受
*@return
*/
Stringchart(){
List<Map<String,Object>>list=userDao.chart();
Map<String,Object>map= @H_367_301@new HashMap<String,Object>();
map.put( "list" Gsongson= GsonBuilder().setDateFormat( "yyyy-MM-dd" ).create();
Strings=gson.toJson(map);
return s;
8.3DAO

使用的的JDBCTemplate 传递sql语句查询。返回list对象

4
Stringsql= "selectu.name,u.agefromuserinfou" ;
jdbcTemplate.queryForList(sql);
以上基本完成了数据的获取和转JSON字符串数组剩下就是在页面接受JSON并填充到highcharts图表里面

9.JS代码。使用AJAX传递过来。并填充到highcharts里面即可。最后一步，也是最要人命的一步。

一定要注意json字符串数组的解析。本人就是在这里纠结了半天多。怨自己没好好学习jquery。和强大的JSON字符串。

本人的json为 所以在遍历的时候需要注意一下自己的list这个数组里面的数据。可以忽略这句话。是本人的失误。

{"list":[{"name":"一号","age":19},{"name":"二号","age":22},{"name":"test","age":19}....]}

15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
$( function (){
var x=[]; //X轴
y=[]; //Y轴
xtext=[]; //X轴TEXT
color=[ "gray" "pink" "red" "blue" "yellow" "green" "#fff" ];
$.ajax({
type: 'get' url: '${ctx}/user/chart' //请求数据的地址
success: (data){
json=eval( "(" +data+ ")" );
s=1;
for ( key in json.list){
json.list[key].y=json.list[key].age; //给Y轴赋值
xtext=json.list[key].name; //给X轴TEXT赋值
json.list[key].color=color[key];
}
chart.series[0].setData(json.list); //数据填充到highcharts上面
},
error: (e){
}
});
chart= new Highcharts.Chart({
chart:{
renderTo: 'container' 'column' //显示类型柱形
title:{
text: '年龄分布图' //图表的标题
xAxis:{
categories:xtext
yAxis:{
title:{
'年龄' //Y轴的名称
series:[{
name: "姓名"
}]
});
});

个人微博http://weibo.com/zxshuai319

个人博客http://my.oschina.net/xshuai/blog

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作