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

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

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 自己下载就好了

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

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

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

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

操作当点击跳转页面

    6.Controller代码

    @RequestMapping(value = "chartpage")
    public String chartpage(HttpServletRequest request,
            HttpServletResponse response) {
        return "views/user/chartpage";
    }
与第5步的想对应。

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

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

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

    8.图表需要的数据方法

        8.1 Controller

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

    @RequestMapping(value = "/chart")
    public String chart(HttpServletRequest request, 
            HttpServletResponse response) throws Exception {
        String result = null;
        try {
            result = userService.chart();
        } catch (Exception e) {
            if(log.isErrorEnabled()){
                log.error("查询列表失败", e);
            }
            result = null;
        }
        StringUtil.writeToWeb(result, "html", response);
        return null;
    }

        8.2 Service

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

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

        8.3 DAO

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

public List<Map<String,Object>> chart(){
        String sql = "select u.name,u.age from userinfo u";
        return 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}....]}
$(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:"姓名"
        }]
    });
});

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

公开QQ  783021975 请留言说明您的问题。否则不加。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏嵌入式程序猿

ARM coretex M4 系统定时器

系统定时器SysTick简介 今天我们来讲讲ARM cortex M4核系统定时器system Timer,处理器核有一个24位的系统定时器SysTick,可以...

3174
来自专栏喔家ArchiSelf

全栈Python 编程必备

Python作为一种编程语言,被称为“胶水语言”,更被拥趸们誉为“最美丽”的编程语言,从云端到客户端,再到物联网终端,无所不在,同时还是人工智能优选的编程语言。

794
来自专栏斑斓

引入Option优雅地保证健壮性

REA的Ken Scambler在其演讲《2 Year of Real World FP at REA》中,总结了选择函数式编程的三个原因:Modularity...

3375
来自专栏SpringSpace.cn

使用 Postman 与 Kotlin 交互REST API接口数据 顶

在前面2篇文章使用 Kotlin 和Spring Boot 2.0快速开发REST API接口和使用 Kotlin 和Spring Boot 2.0快速开发RE...

823
来自专栏.NET后端开发

Highcharts使用指南

摘要 Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。通过本文,你将学会如何配置Highcha...

2815
来自专栏web前端教室

[先行者周末课程] 日历组件的开发思路讲解&&日历组件在实际工作中的使用方式

各位同学们大家好,今天又到了周日,视频课程的时候。上次咱们讲的是日历组件。 简短的回顾一下上周的内容,免得同学们一时断篇,想不起来身在何方。日历这种东西,初学者...

18510
来自专栏coolblog.xyz技术专栏

MyBatis 源码分析 - 缓存原理

在 Web 应用中,缓存是必不可少的组件。通常我们都会用 Redis 或 memcached 等缓存中间件,拦截大量奔向数据库的请求,减轻数据库压力。作为一个重...

641
来自专栏Java成神之路

Java企业微信开发_05_消息推送之被动回复消息

微信加解密包 下载地址:http://qydev.weixin.qq.com/java.zip      ,此包中封装好了AES加解密方法,直接调用方法即可。

1052
来自专栏菩提树下的杨过

spring cloud 学习(11) - 用fastson替换jackson及用gb2312码输出

前几天遇到一个需求,因为要兼容旧项目的编码格式,需要spring-cloud的rest接口,输出gb2312编码,本以为是一个很容易的事情,比如下面这样:

1011
来自专栏Android群英传

掌控 Android Gradle

822

扫码关注云+社区