利用JqPlot画饼图

jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且，jqPlot具有插件可扩展性(Pluggability)，你可以编写自己的图表样式。
功能概述：
1.  有多种图表样式可供选择
2.  可以自定义日期轴线
3.  可设置旋转轴文字
4.  自动计算趋势线
5.  工具条提示和高亮数据点
6.  默认最优设置，非常易于使用
以上功能在jqPlot主页中的示例页面有很多直观的展示。这里是它详细使用文档。
   缺点：柱状图无法显示具体数据值。饼状图无法显示具体百分比。
下面来看实现饼状图的一个实例：
代码：
需要的导入的文件：

<link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" />     <script src="../jquery.js" type="text/javascript"></script>     <script language="javascript" type="text/javascript" src="../jquery.jqplot.js"></script>     <script language="javascript" type="text/javascript" src="../plugins/jqplot.pieRenderer.js"></script>

实现柱状图的代码：

<script type="text/javascript">           $(document).ready(function(){               var piedata = [['FireFox:3783', 3783], ['IE 9:856', 856], ['IE other:1635', 1635], ['Chrome:2321', 2321], ['Safari:456', 456], ['Opera:612', 612]];               var pie = $.jqplot('chart2', [piedata], {                 title: '统计饼图', seriesColors: [ "#579575", "#d8b83f", "#ff5800", "#0085cc","#4bb2c5", "#c5b47f", "#EAA228"],                  series:[{                      renderer: $.jqplot.PieRenderer,                     rendererOptions: { diameter: 250,//饼图的直径                         sliceMargin: 1,//饼的每个部分之间的距离                         showDataLabels: true,                         dataLabelNudge: 35, shadow:false,//为饼的每个部分的边框设置阴影，以突出其立体效果                     }                  }],                 legend: {                     show: true                 }               });                     });       </script>

在body里面在写一个DIV:

< div id="chart2" style="height:340px; width:500px;"></div>

实例图如下：