餅圖的動態加載
(1):導入樣式
<script type="text/javascript" src="<%=request.getContextPath()%>/boot_js/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/highCharts/highcharts.js"></script>
(2):代碼
<script type="text/javascript">
var chart;
$(function () {
$(document).ready(function() {
chart = new Highcharts.Chart({
//常規圖表選項設置
chart: {
renderTo: 'container', //在哪個區域呈現，對應HTML中的一個元素ID
plotBackgroundColor: null, //繪圖區的背景顏色
plotBorderWidth: null, //繪圖區邊框寬度
plotShadow: false //繪圖區是否顯示陰影
},
//圖表的主標題
title: {
text: '公司比例圖'
},
//當鼠標經過時的提示設置
tooltip: {
pointFormat: '<h2>{series.name}</h2>: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
//每種圖表類型屬性設置
plotOptions: {
//餅狀圖
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
//Highcharts.numberFormat(this.percentage,2)格式化數字，保留2位精度
return '<b>'+ this.point.name +'</b>: '+Highcharts.numberFormat(this.percentage,2) +' %';
}
}
}
},
//圖表要展現的數據
series: [{
type: 'pie',
name: '比率'
}]
});
});
getData();
});
/* $(function(){
$('.form_datetime').datetimepicker({
minView: "month", //選擇日期后，不會再跳轉去選擇時分秒
language: 'zh-CN',
format: 'yyyy-mm-dd',
todayBtn: 1,
autoclose: 1,
});
$("#button").click(function(){
var startTime = $("#startTime").val();
var endTime = $("#endTime").val();
if(startTime != '' && endTime != ''){
if(confirm("確定要查詢日期"+startTime+"至"+endTime)){
//myLineChart.destroy();
getData();
}
}else{
alert("請正確輸入");
}
});
});*/
function getData(){
//var startTime = $("#startTime").val();
//var endTime = $("#endTime").val();
//異步請求數據
$.ajax({
type:"GET",
url:"<%=request.getContextPath()%>/charts/getChartsPie.action?startTime="+startTime+"&endTime="+endTime ,
dataType:'json',
success:function(data){
if(data == ''){
alert("親，請重新選擇正確的時間");
}else{
//定義一個數組
browsers = [],
//迭代，把異步獲取的數據放到數組中
$.each(data,function(i,d){
browsers.push([d.type,d.dataCount]);
});
//設置數據
chart.series[0].setData(browsers);
}
},
error:function(e){
alert(e);
}
});
}
</script>
(3)html代碼
<div id="container" style="min-width: 400px; height: 400px;margin-bottom: 150px"></div>