HTML5之Canvas绘图实例——曲线图

实现正弦、余弦和正切函数画图(如下图)：调试环境：Firefox

页面代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4 
  5 </head>
  6 
  7 <body>
  8     <div class="widget-box transparent" style="width:58%;">
  9         <div class="widget-header widget-header-flat">
 10             <h4 class="lighter">
 11                 <i class="icon-signal"></i>
 12                 销售统计
 13             </h4>
 14 
 15             <div class="widget-toolbar">
 16                 <a href="#" data-action="collapse">
 17                     <i class="icon-chevron-up"></i>
 18                 </a>
 19             </div>
 20         </div>
 21 
 22         <div class="widget-body">
 23             <div class="widget-main padding-4">
 24                 <div id="sales-charts"></div>
 25             </div><!-- /widget-main -->
 26         </div><!-- /widget-body -->
 27     </div><!-- /widget-box -->
 28     
 29 
 30     <!-- basic scripts -->
 31     <!--[if !IE]> -->
 32 
 33     <script type="text/javascript">
 34         window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>" + "<" + "script>");
 35     </script>
 36 
 37     <!-- <![endif]-->
 38     <!--[if IE]>
 39     <script type="text/javascript">
 40      window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"script>");
 41     </script>
 42     <![endif]-->
 43 
 44     <script src="assets/js/bootstrap.min.js"></script>
 45 
 46     <script src="assets/js/flot/jquery.flot.min.js"></script>
 47 
 48     <!-- inline scripts related to this page -->
 49 
 50     <script type="text/javascript">
 51         jQuery(function ($) {
 52 
 53 
 54             var d1 = [];
 55             for (var i = 0; i < Math.PI * 2; i += 0.5) {
 56                 d1.push([i, Math.sin(i)]);
 57             }
 58 
 59             var d2 = [];
 60             for (var i = 0; i < Math.PI * 2; i += 0.5) {
 61                 d2.push([i, Math.cos(i)]);
 62             }
 63 
 64             var d3 = [];
 65             for (var i = 0; i < Math.PI * 2; i += 0.2) {
 66                 d3.push([i, Math.tan(i)]);
 67             }
 68 
 69 
 70             var sales_charts = $('#sales-charts').css({ 'width': '100%', 'height': '220px' });
 71             $.plot("#sales-charts", [
 72                 { label: "Domains", data: d1 },
 73                 { label: "Hosting", data: d2 },
 74                 { label: "Services", data: d3 }
 75             ], {
 76                 hoverable: true,
 77                 shadowSize: 0,
 78                 series: {
 79                     lines: { show: true },
 80                     points: { show: true }
 81                 },
 82                 xaxis: {
 83                     tickLength: 0
 84                 },
 85                 yaxis: {
 86                     ticks: 10,
 87                     min: -2,
 88                     max: 2,
 89                     tickDecimals: 3
 90                 },
 91                 grid: {
 92                     backgroundColor: { colors: ["#fff", "#fff"] },
 93                     borderWidth: 1,
 94                     borderColor: '#555'
 95                 }
 96             });
 97 
 98         })
 99     </script>
100 
101 </body>
102 </html>

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

https://files.cnblogs.com/files/xiaoerlang90/Html5%E7%94%BB%E5%9B%BE%E5%BC%95%E7%94%A8js%E6%96%87%E4%BB%B6.zip

 

posted on 2015-10-08 14:18  小呀么小二郎  阅读(1101)  评论(0)  编辑  收藏  举报

导航