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 class="bt-box">
<div id="hidden">
<input id="pieData" 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>
轉載于:https://blog.51cto.com/shuaigee/1132885
總結
以上是生活随笔為你收集整理的Highcharts的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 只想问你一句：“伤害我，你会心疼吗？”
- 下一篇： [linux学习] 字符界面linux安