2019独角兽企业重金招聘Python工程师标准>>> 
官网例子&＃xff1a;http://people.iola.dk/olau/flot/examples/
官网例子打包下载&＃xff1a;http://code.google.com/p/flot/downloads/list
官网API&＃xff08;英文&＃xff09;&＃xff1a; https://github.com/flot/flot/blob/master/API.md
中文API&＃xff1a;http://www.itivy.com/ivy/archive/2011/6/4/jquery-flot-chinese-doc.html
首先在页面引入&＃xff1a;
因为Flot是在HTML5的canvas标签上画的&＃xff0c;所以不支持该标签的浏览器要想画图还需要引入&＃xff1a;
canvas标签简介&＃xff1a;http://www.w3school.com.cn/html5/tag_canvas.asp
该插件可以画lines、points、bars、pie&＃xff0c;&＃xff08;线状图、点状图、柱状图、饼状图&＃xff09;四种图形。
画图之前用一个Div当做画布&＃xff1a;
定义一个数据&＃xff1a;var d1 &＃61; [[0, 10],[7, 25], [11, 23],[17, 22],[19, 5],[28, 10],[27, 30]];
1 画一个浅蓝色的线状图 $.plot($("#placeholder"), [{ data:d1,lines:{show:true},color: "#87CEFA" }]);
2 画一个深蓝色的点状图 $.plot($("#placeholder"), [{ data:d1,points:{show:true},color: "#1E90FF" }]);
你可能发现点状图的点怎么是空心的&＃xff1f;
实心&＃xff1a;$.plot($("#placeholder"), [{ data:d1,points:{show:true,lineWidth:4,radius:2},color: "#1E90FF" }]);
原来点的实心与否和lineWidth、radius&＃xff08;线的宽度、点的大小&＃xff09;有关&＃xff0c;根据这两个属性可以随意设置点的大小和空心的大小。
3 怎么把点状图的点连起来那&＃xff0c;其实把两图合并就可以了。
$.plot($("#placeholder"), [{ data:d1,lines:{show:true},color: "#87CEFA" },{ data:d1,points:{show:true,lineWidth:4,radius:2},color: "#1E90FF" }]);
京公网安备 11010802041100号