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

時間 2019-11-20

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

原文原文鏈接

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

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

Highcharts簡介
html

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

2.Highcharts 中文API 實例網站jquery

http://www.hcharts.cn/index.php ---------------------中文官方網站web

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

http://www.hcharts.cn/demo/index.php---------------在線演示sql

http://bbs.hcharts.cn/forum.php-----------------------中文論壇json

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:"姓名"
        }]
    });
});