jQuery图表插件 Flot（一）

最新推荐文章于 2020-08-23 19:00:48 发布

原创最新推荐文章于 2020-08-23 19:00:48 发布 · 4.9k 阅读

0 ·

CC 4.0 BY-SA版权

官网工具集专栏收录该内容

5 篇文章

订阅专栏

本文介绍了jQuery图表插件Flot的使用，包括如何在页面引入，利用canvas标签创建画布，以及如何绘制线状图、点状图、柱状图和饼状图。示例代码展示了设置颜色、点的形状和大小以及添加标签的方法。

官网例子：http://people.iola.dk/olau/flot/examples/

官网例子打包下载：http://code.google.com/p/flot/downloads/list

官网API（英文）： https://github.com/flot/flot/blob/master/API.md

中文API：http://www.itivy.com/ivy/archive/2011/6/4/jquery-flot-chinese-doc.html

首先在页面引入：

<script src="JavaScript/jquery.js" type="text/javascript"></script>
<script src="JavaScript/jquery.flot.js" type="text/javascript"></script>

因为Flot是在HTML5的canvas标签上画的，所以不支持该标签的浏览器要想画图还需要引入：

<!--[if IE]><script language="javascript" type="text/javascript" src="JavaScript/Flot/excanvas.pack.js"></script><![endif]-->

canvas标签简介：http://www.w3school.com.cn/html5/tag_canvas.asp

该插件可以画lines、points、bars、pie，（线状图、点状图、柱状图、饼状图）四种图形。

画图之前用一个Div当做画布：<div id="placeholder" style="width:600px;height:300px;"></div>

定义一个数据：var d1 = [[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" }]);

你可能发现点状图的点怎么是空心的？

实心：$.plot($("#placeholder"), [{ data:d1,points:{show:true,lineWidth:4,radius:2},color: "#1E90FF" }]);

原来点的实心与否和lineWidth、radius（线的宽度、点的大小）有关，根据这两个属性可以随意设置点的大小和空心的大小。

3 怎么把点状图的点连起来那，其实把两图合并就可以了。

$.plot($("#placeholder"), [{   data:d1,lines:{show:true},color: "#87CEFA"   },{   data:d1,points:{show:true,lineWidth:4,radius:2},color: "#1E90FF"   }]);

4 我想对点状图的点添加标签怎么做那？