本节内容：
highcharts饼图，用于磁盘监控。
首先，来看下HighCharts特点（若不知highcharts为何处，请参阅 Highcharts教程 中的详细介绍）。
1.兼容性：HighCharts采用纯javascript编写，兼容当今大部分的浏览器，包括Safari、IE和火狐等等；
2.图表类型众多：HighCharts现在支持多种图表类型，包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等，可以满足各种需求。
3.不受语言约束：HighCharts可以在大多数的WEB开发中使用，并且对个人用户免费，支持ASP，PHP，JAVA，.NET等多种语言中使用。
4.提示功能：HighCharts生成的图表中，可以设置在数据点上显示提示效果，即将鼠标移动到某个数据点上，可以显示该点的详细数据，并且可以对显示效果进行设置。
5.放大功能：HighCharts可以大量数据集中显示，并且可以放大某一部分的图形，将图表的精度增大，进行详细的显示，可以选择横向或者纵向放大。
6.时间轴：可以精确到毫秒
本实例饼图采用Highcharts图表库实现，界面显示是html5+Bootstrap实现。
例子：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>磁盘监控-www.jb200.com</title>
<script src="js/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
<meta name="description" content="">
<meta name="elephant" content="">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script>
$(function () {
var a =['20.0','40.0','40.0'];
show('bar1','磁盘一',a);
a =['10.0','60.0','30.0'];
show('bar2','磁盘二',a);
a =['5.0','40.0','55.0'];
show('bar3','磁盘三',a);
});
function show(div_id,title_name,print_date){
var chart;
var date1=parseFloat(print_date[0]);
var date2=parseFloat(print_date[1]);
var date3=parseFloat(print_date[2]);
$(document).ready(function () {
// Build the chart
$('#'+div_id).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
exporting:{
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
},
title: {
text: title_name
},
colors:[
'#FF00FF',
'#0000FF',
'#D8DDE3',
],
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: '值',
data: [['空闲',date1],
['已使用',date2],
['交换空间',date3],
]
}]
});
});
}
</script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<span id="logo"><img id="logo" src="./images/logo2.png"></img> </span>
<h3 class="muted" id="title">录音系统</h3>
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="index.html">首页</li>
<li><a href="download.html">录音下载</li>
<li class="active"><a href="monitor.html">磁盘监控</li>
<li><a href="user.html">用户管理</li>
<li><a href="login.html">注销</li>
</ul>
<!-- /.navbar -->
<hr>
<div class="container">
<!--磁盘一-->
<div class="portlet_blok">
<div class='tabapplet' >
系统资源
<div id="bar1" class="bar">
<!--磁盘二-->
<div class="portlet_blok">
<div class='tabapplet' >
系统资源
<div class="portlet_content">
<div id="bar2" class="bar">
<!--磁盘三-->
<div class="portlet_blok">
<div class='tabapplet' >
系统资源
<div class="portlet_content">
<div id="bar3" class="bar">
<div class="container">
<div class="form-actions">
<div id="footer">摩羯座工作室©2013
</body>
</html>
chrome下效果图，如下：
