HTML5之Canvas绘图实例——饼状图

实现饼状分布画图(如下)：调试环境：Firefox

aaarticlea/png;base64,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" alt="" />

页面代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>

     <!-- basic styles -->
     <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="assets/css/font-awesome.min.css" />

     <!-- ace styles -->
     <link rel="stylesheet" href="assets/css/ace.min.css" />

 </head>

 <body>
     <div class="widget-box" style="width:60%;">
         <div class="widget-header widget-header-flat widget-header-small">
             <h5>
                 <i class="icon-signal"></i>
                 访问来源
             </h5>

             <div class="widget-toolbar no-border">
                 <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                     本周
                     <i class="icon-angle-down icon-on-right bigger-110"></i>
                 </button>

                 <ul class="dropdown-menu pull-right dropdown-125 dropdown-lighter dropdown-caret">
                     <li class="active">
                         <a href="#" class="blue">
                             <i class="icon-caret-right bigger-110">&nbsp;</i>
                             本周
                         </a>
                     </li>

                     <li>
                         <a href="#">
                             <i class="icon-caret-right bigger-110 invisible">&nbsp;</i>
                             上周
                         </a>
                     </li>

                     <li>
                         <a href="#">
                             <i class="icon-caret-right bigger-110 invisible">&nbsp;</i>
                             本月
                         </a>
                     </li>

                     <li>
                         <a href="#">
                             <i class="icon-caret-right bigger-110 invisible">&nbsp;</i>
                             上月
                         </a>
                     </li>
                 </ul>
             </div>
         </div>

         <div class="widget-body">
             <div class="widget-main">
                 <div id="piechart-placeholder"></div>

                 <div class="hr hr8 hr-double"></div>

                 <div class="clearfix">
                     <div class="grid3">
                         <span class="grey">
                             <i class="icon-facebook-sign icon-2x blue"></i>
                             &nbsp; likes
                         </span>
                         <h4 class="bigger pull-right">1,255</h4>
                     </div>

                     <div class="grid3">
                         <span class="grey">
                             <i class="icon-twitter-sign icon-2x purple"></i>
                             &nbsp; tweets
                         </span>
                         <h4 class="bigger pull-right">941</h4>
                     </div>

                     <div class="grid3">
                         <span class="grey">
                             <i class="icon-pinterest-sign icon-2x red"></i>
                             &nbsp; pins
                         </span>
                         <h4 class="bigger pull-right">1,050</h4>
                     </div>
                 </div>
             </div><!-- /widget-main -->
         </div><!-- /widget-body -->
     </div><!-- /widget-box -->
     <!-- /.main-container -->
     <!-- basic scripts -->
     <!--[if !IE]> -->
     <!--[if !IE]> -->

     <script type="text/javascript">
         window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>" + "<" + "script>");
     </script>

     <!-- <![endif]-->
     <!--[if IE]>
     <script type="text/javascript">
      window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"script>");
     </script>
     <![endif]-->
     <script type="text/javascript">
         if ("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "script>");
     </script>

     <script src="assets/js/bootstrap.min.js"></script>

     <!-- page specific plugin scripts -->
     <script src="assets/js/flot/jquery.flot.min.js"></script>　　　　// 曲线图
     <script src="assets/js/flot/jquery.flot.pie.min.js"></script> 　　// 饼状图

     <!-- inline scripts related to this page -->

     <script type="text/javascript">
         jQuery(function ($) {
             var placeholder = $('#piechart-placeholder').css({ 'width': '90%', 'min-height': '150px' });
             var data = [
               { label: "social networks", data: 38.7, color: "#68BC31" },
               { label: "search engines", data: 24.5, color: "#2091CF" },
               { label: "ad campaigns", data: 8.2, color: "#AF4E96" },
               { label: "direct traffic", data: 18.6, color: "#DA5430" },
               { label: "other", data: 10, color: "#FEE074" }
             ]
             function drawPieChart(placeholder, data, position) {
                 $.plot(placeholder, data, {
                     series: {
                         pie: {
                             show: true,
                             tilt: 0.8,
                             highlight: {
                                 opacity: 0.25
                             },
                             stroke: {
                                 color: '#fff',
                                 width: 2
                             },
                             startAngle: 2
                         }
                     },
                     legend: {
                         show: true,
                         position: position || "ne",
                         labelBoxBorderColor: null,
                         margin: [-30, 15]
                     }
                   ,
                     grid: {
                         hoverable: true,
                         clickable: true
                     }
                 })
             }
             drawPieChart(placeholder, data);

             /**
             we saved the drawing function and the data to redraw with different position later when switching to RTL mode dynamically
             so that's not needed actually.
             */
             placeholder.data('chart', data);
             placeholder.data('draw', drawPieChart);

             var $tooltip = $("<div class='tooltip top in'><div class='tooltip-inner'></div></div>").hide().appendTo('body');
             var previousPoint = null;

             placeholder.on('plothover', function (event, pos, item) {
                 if (item) {
                     if (previousPoint != item.seriesIndex) {
                         previousPoint = item.seriesIndex;
                         var tip = item.series['label'] + " : " + item.series['percent'] + '%';
                         $tooltip.show().children(0).text(tip);
                     }
                     $tooltip.css({ top: pos.pageY + 10, left: pos.pageX + 10 });
                 } else {
                     $tooltip.hide();
                     previousPoint = null;
                 }

             });

         })
     </script>

 </body>
 </html>

所需引用的js文件下载链接：

http://files.cnblogs.com/files/xiaoerlang90/Html5%E9%A5%BC%E7%8A%B6%E5%9B%BE%E5%BC%95%E7%94%A8%E6%96%87%E4%BB%B6.zip