jQuery.Flot_ZC下载测试
1、下载：https://github.com/flot/flot
下载存放的路径：F:\ZC_IDE\JavaScript\jQuery_Chart\flot-master.zip
2、测试代码：（"jQuery_Chart_Test.html" 保存为 UTF-8格式）
<!--内联 XHTML--> <!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> --> <!--内联 HTML5--> <!DOCTYPE html> <!-- https://www.cnblogs.com/lwme/archive/2012/08/18/jquery-flot-plugin.html https://www.cnblogs.com/wicub/p/4383359.html 里面有跳转到新页面的例子，值得看 (有较详细的解释) http://cuisuqiang.iteye.com/blog/1462615 这个文章看完后，可以看作者的前后的别的文章 http://cuisuqiang.iteye.com/blog/1462646 --> <html> <head> <meta charset="UTF-8"> <script language="javascript" type="text/javascript" src="./flot-master/jquery.js"></script> <script language="javascript" type="text/javascript" src="./flot-master/jquery.flot.js"></script> <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="./flot-master/excanvas.min.js"></script><![endif]--> <script type="text/javascript" > <!-- $(function () { // ZC: 最下面的波浪线 // ZC: 数组方式(1) var d1 = []; for (var i = 0; i < 14; i += 0.5) d1.push([i, Math.sin(i)]); // ZC: 第二个 折线 // ZC: 数组方式(2) var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; // ZC: 第一个/第三个 横线 // ZC: 数组方式(3) --> 数组中间 还能中断("null") // a null signifies separate line segments var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; // ZC: 给出点，就会画出图形？ // ZC: 别的好理解，最后一个 它是如何知道要画 波浪线 的？ //$.plot($("#placeholder"), [ d1, d2, d3 ]); // *** *** *** var str = ""; for (var i=0; i<d1.length; i++) { //console.log("d1["+i+"] : "+d1[i]); str += "["+d1[i]+"],"; } console.log(str); var d4 = [ [0,0],[0.5,0.479425538604203],[1,0.8414709848078965],[1.5,0.9974949866040544],[2,0.9092974268256817],[2.5,0.5984721441039564],[3,0.1411200080598672],[3.5,-0.35078322768961984],[4,-0.7568024953079282],[4.5,-0.977530117665097],[5,-0.9589242746631385],[5.5,-0.7055403255703919],[6,-0.27941549819892586],[6.5,0.21511998808781552],[7,0.6569865987187891],[7.5,0.9379999767747389],[8,0.9893582466233818],[8.5,0.7984871126234903],[9,0.4121184852417566],[9.5,-0.0751511204618093],[10,-0.5440211108893698],[10.5,-0.87969575997167],[11,-0.9999902065507035],[11.5,-0.8754521746884285],[12,-0.5365729180004349],[12.5,-0.06632189735120068],[13,0.4201670368266409],[13.5,0.803784426551621] ]; $.plot($("#placeholder"), [ d4, d2, d3 ]); //$.plot($("#placeholder"), [ d2, d3, d4 ]); }); window.onload = function() { }; --> </script> <style type="text/css"> <!-- --> </style> </head> <body> <div id="placeholder" style="width:600px;height:300px;"></div> </body> </html>
3、
4、
5、
