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

上个图给大家看下效果。

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

  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:"姓名"
        }]
    });
});
时间: 2024-10-25 12:30:31

Highcharts、AJAX、JSON、JQuery实现动态数据交互显示图表柱形图的相关文章

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

这是第一篇实例的步骤与代码.还有整个项目的结构图. http://my.oschina.net/xshuai/blog/345117 原创的博文.转载注明出处.大家赶紧收藏吧.  本人highcharts新手.只是做个了练手的实例.还望大神指点. 上个图给大家看下效果. 点击  查看图表 如下图展示效果 Highcharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网

032.Ajax+Json+Jquery

AjjA: AjaxJ: JSONJ: jQuery -----------------------------------------------JSONJavascript Object NotationJS对象标记 class User{ public int Id{get;set;} public string Name{get;set;} public string Phone{get;set;} // public string HomeAddress{get;set;} // pu

Java+Json+JQuery将本地文件显示在网页上

前段时间为是练习JQuery和Java遍历目录,写了一个JavaWeb(使用Jsp+Servlet)的例子.源代码下载:https://github.com/liaoyu/uudisk 上述源码是Myeclipse新建的项目,需要配置一些环境,比如JRE路径,以下是运行截图,界面模仿新浪微盘 工作原理就是通过Java遍历系统(Windows)的目录,前台通过点击图标以ajax方式触发事件,后台以json数据的形式把文件结构返回给前台,前台通过JS解析JSON数据内容,展示不同的图片.目前尚存在的

Highcharts+Ajax+Json+Sturts2实现的图形异步实时刷新的一个简单demo

原文:Highcharts+Ajax+Json+Sturts2实现的图形异步实时刷新的一个简单demo 源代码下载地址:http://www.zuidaima.com/share/1550463370480640.htm 此功能可以用在后端对数据的实时抓取,前端动态更新时使用,可以根据数据的变化进行实时刷新,基于之前我上传的一个图形demo改制.如有意见建议,疑问,大家可以留言一起探讨. 源代码截图:

AJAX+json+jquery实现预加载瀑布流布局

宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片 加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的 在ff等支持css3可以显示 你如果想全面支持浏览器可以用gif动画 代码里有详细解释就不多说了 ?1. [代码]预加载/瀑布流  <!doctype html><html><head><meta charset="utf-8"><title>定宽Jque

MVC $.Ajax()+Json实现数据库访问并显示数据

我们在使用搜索引擎时经常会看到这样一个效果 在输出输入相关文字时会有与之对应的相关提醒,作为一个MVC初学者我也做了一个简单版的“搜索工具”,分享给初学mvc和ajax的童鞋(各位大神勿喷),也加深我对代码的理解 第一部数据部分:数据库部分,你可以自己建一张表,然后加几条数据就可以了,我在此用的是我自己做的一个测试系统的试题表 第二部 就是代码编写部分了,mvc Model部分我没有运用Linq或EF,而是运用了DBhelp类访问数据库,这样更易于初学者理解,下图Topic为上图的表类 后台代码

Ajax和Json实现后台传集合给前台并赋值文本框-----Ajax\Json\JQuery

功能:放两个文本框和一个确定按钮,确定按钮绑定点击事件,点击确定就加载后台数据库中的数据,显示在文本框中. 基础知识:JQuery  ajax异步 .eval() .each() json数据 1.HTML文件 <div id="Text"> <input type="text" id="comment1" name="t_A21" numberID="one" value="&

在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图

今天在做一个关于商城后台金额报表统计的功能,为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用HIghCharts插件下的的报表,大家也可以去了解一下免费开源主要是好看. Highcharts地址:https://www.hcharts.cn/demo/highcharts,接下来我就直接上代码了. 首先是后台代码: using System; using System.Collections.Generic; using System.Linq; using System.Web

ajax json jQuery提示parsererror错误解决办法

1 $.ajax({ 2 type:'POST', 3 url:'<%=basePath%>/xxx.do', 4 dataType:'JSON', 5 data:{ 6 }, 12 success:function(data){ 15 $("#main").html(data.msg); 16 $("#PageContent").html(data.pagerHtml);19 }, 20 error: function(XMLHttpRequest,