Highcharts的使用
由于业务需求，需要出各种统计图，因此使用了Highcharts，今天分享一下我使用Highcharts的一点点经验。
好多地方都有关于Highcharts的问题，但是好多都是下载的下的源码，值都是写死的，但是一般情况下，值都是动态的。下面是我写的代码，希望对大家能有点帮助。
下面只写了饼状统计图。
$(function() {
var options;
var chart;
var options;
$(document).ready(function() {
options = getPieOptions(options);
var chart = new Highcharts.Chart(options);
});
});
function getVoetTitle() {
var title = $("#voteTitle").val();
return title;
}
function getPieOptions(options) {
options = {
chart : {
renderTo : 'container',
plotBackgroundColor : null,
plotBorderWidth : null,
plotShadow : false
},
title : {
text : ''
},
tooltip : {
pointFormat : '<b>{point.percentage}%</b>',
percentageDecimals : 1
},
plotOptions : {
pie : {
allowPointSelect : true,
cursor : 'pointer',
dataLabels : {
enabled : true,
color : '#000000',
connectorColor : '#000000',
formatter : function() {
return '<b>' + this.point.name + '</b>: '
+ this.percentage + ' %';
}
}
}
},
series : [ {
type : 'pie',
data : eval($("#pieData").val())
} ]
};
options.title.text = getVoetTitle();
return options;
}
其中series的data 参数是是对象类型，所以使用eval 函数
下面为页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<title>投票</title>
<link href="$!{SystemParameter.getParamterValue("weburl")}/$!{SystemParameter.getParamterValue("cssStyle")}/css/bj.css" type="text/css" rel="stylesheet" />
<link href="../css/validator.css" rel="stylesheet" type="text/css" />
<link href="../css/flora.datepicker.css" rel="stylesheet" type="text/css" media="screen" title="core css file" charset="utf-8" />
<script type="text/javascript" src="../js/jquery-1.4.4.js"></script>
<script src="./js/highcharts.js"></script>
<script src="./js/showVoteStatistics.js"></script>
</head>
<body>
<div type="hidden" value="$!{pieDataSbf}"/>
<input id="voteTitle" type="hidden" value="$!{votePaper.vote_name}"/>
</div>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>
</body>
</html>
