Highcharts饼图的容易应用

Highcharts饼图的简单应用
详情可见：http://www.cnblogs.com/liuhaorain/archive/2012/01/24/2311352.html

1.使用Highcharts需要同时引用jQuery和Hightcharts两个文件。如下：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>

2.在您的网页头部的脚本标签，或在一个单独的js文件，添加JavaScript代码来初始化图表。renderTo参数用来设置图表渲染的位置，一般来说是一个具有ID的DIV元素（参考第3步）。

var chart1; // 全局变量
$(document).ready(function() {
      chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'container',
            type: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });

3.在页面中添加一个DIV元素，作为放置Highcharts图表的容器。需要为其设置ID值，与第2步rendTo参数绑定。设置的宽度和高度将作为Highcharts图表的宽度和高度。

<div id="container" style="width: 100%; height: 400px"></div>

4.你可以通过Highcharts.setOptions方法为Highcharts图表设置一个全局的主题（可选的）。下载包含有四个预定义的主题，如果你需要使用从这些主题，只需在 highcharts.js 后引用这些文件。比如：

<script type="text/javascript" src="/js/themes/gray.js"></script>

项目实例：
highcharts中饼图解析的数据格式需如：
['csjk2',1],['csjk',3],['csjk1',5]

后台将列表信息发送到jsp页面

	@RequestMapping(params = "method=chart")
	public String chart(HttpServletResponse response,HttpServletRequest request,ModelMap modelMap){
		List<Interserivice> interserverlist =  interseriviceService.getJson();
		modelMap.addAttribute("interserverlist", interserverlist);
		return "system/interservice_chart";
	}

jsp页面中通过java取出并转化成json数据格式

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
List<Interserivice> interserverlist =(List<Interserivice>)request.getAttribute("interserverlist");
JSONArray json = JSONArray.fromObject(interserverlist);
String dataTmp="";
for(int i=0;i<json.size();i++){
	JSONObject jsonObject = JSONObject.fromObject(json.get(i));
	dataTmp+="['"+jsonObject.getString("CODE")+"',"+jsonObject.getInt("COUNT")+"],";
}
dataTmp=dataTmp.substring(0, dataTmp.length() - 1);
System.out.println(dataTmp);
%>

定义div容器：

<form id="form1" name="form1" method="post">
	<div id="container">
	
	</div>
</form>

初始化饼图：


<script type="text/javascript">
$(document).ready(function() {
	
	//颜色渐变
	Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) { 
		return { 
			radialGradient: { 
				cx: 0.5, cy: 0.3, r: 0.7 }, 
				stops: [ 
				         [0, color], 
				         [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken 
				        ] 
				}; 
	});
	
	
	var options = {
			chart: {
				renderTo: 'container',
				plotBackgroundColor: null, 
				plotBorderWidth: null, 
				plotShadow: true 
				}, 
			title: { 
				text: '大众文化圈系统接口调用次数饼状图' 
				}, 
			tooltip: { 
				pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
				}, 
			plotOptions: { 
				pie: {
					allowPointSelect: true, 
					cursor: 'pointer', 
					dataLabels: { 
						enabled: true, 
						color: '#000000', 
						connectorColor: '#000000', 
						formatter: function() { 
							return '<b>'+ this.point.name +'</b>: '+ '调用 '+this.point.y +' 次'; 
                                         //数据格式[this.point.name,this.point.y]
						} 
				    } 
				 } 
			  }, 
			  series: [
			     { 
				  type: 'pie', 
				  name: '接口调用比例', 
				  data: 
				    [  
						//['csjk2',1],['csjk',3],['csjk1',5]
						<%=dataTmp %>
					]
			      
			 	}
			  ] 
		}
	
	
	 		var chart = new Highcharts.Chart(options);

	});

</script>

Highcharts饼图的容易应用

相关推荐