实现正弦、余弦和正切函数画图(如下图)：调试环境：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文件下载链接：