您的位置：首页 > 其它

highcharts 生成饼状图的具体实现

2016-04-21 09:22 357 查看

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>

<script type="text/javascript" src="<%=basePath%>script/jquery-1.7.2.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
/*
var myjson;
var info;

$(function () {
$.ajax(
{
type: "POST",
url: "allCustomerAction!findAllCustomerAgain.action",
data: "",
dataType: "json",
success: function(msg){
info = msg.str;
//   alert( "服务器返回的内容:" + msg.customerList );
//   for(var i = 0 ; i < msg.customerList.length;i++){
//    alert(msg.customerList[i].name);
//    }
alert(info);
abc(info);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert("出错:"+textStatus);
alert("问题:"+errorThrown);
}
}
);
});
*/
//var obj = myjson.parseJSON();
//alert("obj:"+obj);

function abc(){
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
},
title: {
text: '客户统计'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: ${str}
}]
});
}
</script>
</head>
<body onload="abc()">

<script src="<%=basePath%>js/highcharts.js"></script>
<script src="<%=basePath%>js/highcharts-3d.js"></script>
<script src="<%=basePath%>js/exporting.js"></script>

<div id="container" style="height: 400px"></div>
</body>
</html>

在action类中有变量str,有get方法,此处data: ${str}通过EL表达式直接接收,这里需要在action类中把str拼成json格式,如:[ [‘上海’,20],[‘深圳’,20],[‘黄石’,30],[‘香港’,30] ]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

highcharts 生成饼状图 的具体实现

highcharts 生成饼状图的具体实现