饼图的动态加载
(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>
