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

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

Highcharts简介
@H_502_14@

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

2.Highcharts 中文API 实例网站@H_502_14@

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

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

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

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

@H_502_14@3.下载highcharts 与使用@H_502_14@

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

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

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

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

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

HTML代码
<ahref="javascript:void(0);"@H_502_14@@H_502_14@id="highchart"@H_502_14@@H_502_14@onclick="gotoHighchart();"@H_502_14@@H_502_14@class@H_502_14@@H_502_14@="blank_btn"@H_502_14@@H_502_14@>查看图表</a>

js代码
function@H_502_14@gotoHighchart@H_502_14@@H_502_14@@H_502_14@(@H_502_14@@H_502_14@@H_502_14@)@H_502_14@@H_502_14@{
var@H_502_14@@H_502_14@url='${ctx}/user/chartpage'@H_502_14@@H_502_14@;
window.location.href=url;
}

操作当点击@R_1000_404@面

6.Controller代码@H_502_14@

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

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

<@H_502_14@body@H_502_14@@H_502_14@@H_502_14@>@H_502_14@@H_502_14@

<@H_502_14@div@H_502_14@@H_502_14@@H_502_14@@H_502_14@id@H_502_14@@H_502_14@@H_502_14@=@H_502_14@"container"@H_502_14@@H_502_14@@H_502_14@@H_502_14@style@H_502_14@@H_502_14@@H_502_14@=@H_502_14@"width:800px;height:400px;margin:0auto"@H_502_14@@H_502_14@@H_502_14@>@H_502_14@@H_502_14@</@H_502_14@div@H_502_14@@H_502_14@@H_502_14@>@H_502_14@@H_502_14@

</@H_502_14@body@H_502_14@@H_502_14@@H_502_14@>@H_502_14@@H_502_14@

以上实现了页面跳转的功能。需要图表的数据。还得继续@H_502_14@

8.图表需要的数据方法@H_502_14@

8.1@H_502_14@Controller@H_502_14@

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

@RequestMapping@H_502_14@@H_502_14@(value="/chart"@H_502_14@@H_502_14@)
publicStringchart(HttpServletRequestrequest,HttpServletResponseresponse)throwsException{
Stringresult=null;
try@H_502_14@@H_502_14@{
result=userService.chart@H_502_14@@H_502_14@();
}catch(Exceptione){
if@H_502_14@@H_502_14@(log.isErrorEnabled()){
log.error@H_502_14@@H_502_14@("查询列表失败"@H_502_14@@H_502_14@,e);
}
result=null;
}
StringUtil.writeToWeb@H_502_14@@H_502_14@(result,"html"@H_502_14@@H_502_14@,response);
returnnull;
}

8.2@H_502_14@Service@H_502_14@

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

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

8.3@H_502_14@DAO@H_502_14@

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

publicList<Map@H_502_14@@H_502_14@<String@H_502_14@@H_502_14@,Object@H_502_14@@H_502_14@>>chart(){
String@H_502_14@@H_502_14@sql="selectu.name,u.agefromuserinfou"@H_502_14@@H_502_14@;
return@H_502_14@@H_502_14@jdbcTemplate.queryForList(sql);
}

以上基本完成了数据的获取和转JSON字符串数组剩下就是在页面接受JSON并填充到highcharts图表里面@H_502_14@

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

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

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

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

$(function(){
    var x = [];//X轴
    var y = [];//Y轴
    var xtext = [];//X轴TEXT
    var color = ["gray","pink","red","blue","yellow","green","#fff"];
    $.ajax({
        type:'get',url:'${ctx}/user/chart',//请求数据的地址
        success:function(data){
            var json = eval("("+data+")");
            var s = 1;
            for(var 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:function(e){
        } 
    });
    var chart = new Highcharts.Chart({
        chart:{
            renderTo:'container',type:'column' //显示类型 柱形
        },title:{
            text:'年龄分布图' //图表的标题
        },xAxis:{
            categories:xtext
        },yAxis:{
            title:{
                text:'年龄' //Y轴的名称
            },},series:[{
            name:"姓名"
        }]
    });
});

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

猜你在找的Ajax相关文章