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

在做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.别高兴哈，其实真正的重点不在于前面所讲的三个，我们发现横坐标和纵坐标的数值都是从本地读取的，
而并非从后台数据库中获取，因此我们要想办法从后台得到数据，让图表随数据库数据的变化动态