HiChart图表统计:jsp中hichart用法以及从后台获取数据-CSDN博客

本文链接：https://blog.csdn.net/wangyi201212/article/details/42557185

在做web服务器时，用到了图表，对一天内资源的下载量进行统计，让数据更加的直观。上网查了很多资料，最后发现HiChart很好用，相对比较简单。下面作以详细介绍：

1.首先，hichart作为插件，我们即可以从网上下载hichart所用到的文件（下载地址：http://www.hcharts.cn/docs/index.php?doc=start-download），也可以引用网上的资源，下面就一网上资源为例：

需要引入如下js文件：

直接引用就可以；

2.其次在<script>中写如下代码

<html>
<head>
   <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
   <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"></script>
   <script>
	 $(function () { 
	    $('#container').highcharts({
	        chart: {
	            type: 'column'
	        },
	        title: {
	            text: 'My first Highcharts chart'
	        },
	        xAxis: {
	            categories: ['my', 'first', 'chart']
	        },
	        yAxis: {
	            title: {
	                text: 'something'
	            }
	        },
	        series: [{
	            name: 'Jane',
	            data: [1, 0, 4]
	        }]
	    });
	});
   </script>
</head>
	
<body>
   <div id="container" style="min-width:800px;height:400px;"></div>
</body>
</html>
 3.最后，运行结果如图所示：

 4.别高兴哈，其实真正的重点不在于前面所讲的三个，我们发现横坐标和纵坐标的数值都是从本地读取的，
而并非从后台数据库中获取，因此我们要想办法从后台得到数据，让图表随数据库数据的变化动态显示：
这里用到了ajax技术，动态的从后天获取json格式的数据：
       a.ajax请求：
          $.ajax({
                 type:"POST",
                 url:"statisticInfo_getStatisticInfo.do?dateTime=" + document.getElementById("dateTime").value,
                 dataType:'json',
                 async:false,
                 success:function(data){//data即为后台反馈回来的json数据；
                    downNumPerHour = [];
                    data = eval(data.root) 
                     for (var i = 0; i < data.length; i++){//将json数据中的数据解析，放到数组中（即要显示的数据）
                         downNumPerHour.push(data[i].key);
                     }
                 }
               });
      把xAxis: {
	            categories: ['my', 'first', 'chart']
	        }
      改为数组名即可：             xAxis: {
	            categories: downNumPerHour
	        }

      b.后台json数据
        List<Statistic> list = (List<Statistic>)baseDao.findByHql(hql);//从数据库中查找到的数据
        for(int i = 0; i < list.size(); i++){
            int time = Integer.valueOf(list.get(i).getUpdateTime().substring(11, 13));
            count[time - 1]++;
        }
        String json = "{\"root\":[";//拼接json格式的数据；一定是以键值对的形式存在
        for(int i = 0; i < 24; i++){
            if (i != 23){
                json = json + "{\"" + "key" + "\"" + ":" + count[i] + "},";
            }else{
                json = json + "{\"" + "key" + "\"" + ":" + count[i] + "}]}";
            }
        } 
        System.out.println(json);//可以将打印出来的json数据，放到网上在线json格式校验，查看格式是否正确；
        return outString(json);

5.上传jsp的完整代码，由于后天比较多就不复制了；

<%@ page language="java" import="java.util.*"
    contentType="text/html;charset=UTF-8" pageEncoding="utf-8"%>
<head>
  <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
  <script type="text/javascript" src="../../My97DatePicker/WdatePicker.js"></script>
  <script type="text/javascript" src="../../css/HChartsTheme.js"></script>
  <script>
    var downNumPerHour = new Array();
      function fun(){
          /*某一天各个时间段的下载量*/
          if(document.getElementById("dateTime").value==""){
              alert("please choose the time!");
          }else{
               $.ajax({
                 type:"POST",
                 url:"statisticInfo_getStatisticInfo.do?dateTime=" + document.getElementById("dateTime").value,
                 dataType:'json',
                 async:false,
                 success:function(data){
                    downNumPerHour = [];
                    data = eval(data.root) 
                     for (var i = 0; i < data.length; i++){
                         downNumPerHour.push(data[i].key);
                     }
                 }
               });
            $(function () {
                  $('#container').highcharts({
                      tooltip: {
                            formatter: function () {
                                return '(' + '<b>' + this.x +'</b>'+
                                     ', ' + '<b>' + this.y + '</b>' + ')';
                            }
                        },
                        chart: {
                            type: 'line'
                        },
                        title: {
                            text: document.getElementById("dateTime").value      //指定图表标题
                        },
                        xAxis: {
                            allowDecimals : false,
                            tickmarkPlacement : 'on',
                            title: {
                                text: 'hour'
                            },
                            categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
                                         '11', '12','13','14','15','16','17','18','19','20','21','22','23','24']
                        },
                        yAxis: {
                            allowDecimals : false,
                            title: {
                                text: 'downNum'
                            }
                        },
                        series: [{
                            name : "downNum",
                            data: downNumPerHour
                        }]
                    });
               });
          }
      }
  </script>
  
</head>
<body οnlοad="fun()" >
   <p><%=rb.getString("SelectTime") %><input type='text' name='dateTime' id = 'dateTime' value = <%= ((new Date().getYear() + 1900) + "-" + (new Date().getMonth() + 1) + "-" + new Date().getDate())%> onClick="WdatePicker({lang:'en', dateFmt:'yyyy-MM-dd'})">
       <input type="submit" value=<%=rb.getString("Inquiry")%> οnclick="fun()" />
   </p>
   <div class="container" id="container" style="min-width:700px;height:90%"></div>
</body>
</html>
6.注意问题：通过这种格式可以改变图标上坐标的显示格式

                    tooltip: {
                            formatter: function () {
                                return '(' + '<b>' + this.x +'</b>'+
                                     ', ' + '<b>' + this.y + '</b>' + ')';
                            }
                        }
7.防止坐标中显示小数allowDecimals : false,

好了，大概就这些了，不懂得可以上网查，可以给大家个中文官网，写的比较好
http://www.hcharts.cn/docs/index.php?doc=start-helloworld