Highcharts AJAX JSON JQuery 實現動態數據交互顯示圖表柱形圖

時間 2019-11-07

標籤 highcharts ajax json jquery 實現動態數據交互顯示圖表柱形圖欄目 Ajax 简体版

原文原文鏈接

我的小程序，能夠微信掃一掃看看。謝謝支持javascript

這是第一篇實例的步驟與代碼。還有整個項目的結構圖。php

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

原創的博文。轉載註明出處。你們趕忙收藏吧。java

本人highcharts新手。只是作個了練手的實例。還望大神指點。jquery

上個圖給你們看下效果。web

點擊查看圖表以下圖展現效果ajax

Highcharts簡介sql

Highcharts 是一個用純JavaScript編寫的一個圖表庫，可以很簡單便捷的在web網站或是web應用程序添加有交互性的圖表，而且免費提供給我的學習、我的網站和非商業用途使用。HighCharts支持的圖表類型有曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表。json

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

我的博客 http://my.oschina.net/xshuai/blog

公開QQ 783021975 請留言說明您的問題。不然不加。

我的聯盟 http://www.bengbeng.com/?sid=687095