excel中如何画折线图Flot折线图

来源：蜘蛛抓取(WebSpider) 时间：2016-09-28 05:31 标签： 如何画折线图
如何画Flot折线图
如何画Flot柱形图
如何画Flot折线图和柱形图
如何画Flot实时更新图
如何画Flot堆栈图
如何画Flot分区图
Flot数据实时更新
如何画Flot圆饼图
圆饼图是用于看各组资料间的比例,用Flot绘制圆饼图相当简单,不过Flot需要加入jquery.flot.pie.js插件才能给制圆饼图,我们沿用上一章用过的世界人口数据来当作圆饼图的数据源,并且加入一些互动功能呈现.
圆饼图范例 (世界人口比例)
圆饼图资料
因为Flot不支持圆饼图,所以必须加入圆饼图的插件jquery.flot.pie.js,此范例会用到的档案清单如下.
&script type=&text/javascript& src=&/js/jquery-1.8.3.min.js&&&/script&      
&!--[if lte IE 8]&&script language=&javascript& type=&text/javascript& src=&/js/flot/excanvas.min.js&&&/script&&![endif]--&   
&script type=&text/javascript& src=&/js/flot/jquery.flot.js&&&/script&
&script type=&text/javascript& src=&/js/flot/jquery.flot.pie.js&&&/script&
第一步我们先建立一个&div&, 并且指定一个id, 且设定长度及宽度, 这将会成为Flot绘图的定位点.
&div id=&flot-placeholder& style=&width:400height:300px&&&/div&
建立圆饼图所用的数据比其它的图表来得简单,首先我们建立一个叫dataSet的数组变量,并依序插入6个对象数据.label属性为各大洲的名称,设定data属性各大洲的人口数,在这里你只要输入原始数字后Flot会自动帮我们算出百分比,另外color属性则是指定圆饼图区块的颜色.
var dataSet = [
{label: "Asia", data: , color: "#005CDE" },
{ label: "Latin America", data: , color: "#00A36A" },
{ label: "Africa", data: , color: "#7D0096" },
{ label: "Oceania", data: , color: "#992B00" },
{ label: "Europe", data: , color: "#DE000F" },
{ label: "North America", data: , color: "#ED7B00" }
圆饼图选项
圆饼图的选项设定都在series.pie里,要让Flot绘制圆饼图就要设定series.pie.show为true.另外我们自定义了圆饼图的标签,默认圆饼图会自动显示图例,但如果你想改成显示卷标时,可设定legend.show为false,Flot就不会显示图例而改显示卷标.
标签部份我们更改了几个地方,label.radius是设定标签出现在圆饼图的半径位置,如果值是设置0到1之间,那就会用作容器可用空间大小的百分比,如果值是设定大于等于1的话,则会用作像素.
另外我们自定义了label.formatter,此函式可用来自定义显示卷标.我们还设定了label.background.opacity,用来指定标签背景的透明度,而label.background.color则用来设定标签背景颜色.
show: true,
show:true,
radius: 0.8,
formatter: function (label, series) {
return '' +
label + ' : ' +
Math.round(series.percent) +
background: {
opacity: 0.8,
color: '#000'
圆饼图互动功能
因为圆饼图卷标默认只能显示百分比数据,但如果我们想要知让用户鼠标移到圆饼图区块上就可以显示该区块的原始数据的话,可以用Flot内建的&plothover&事件来完成.首先我们先在定位点下方插入一个div,并给与一个id名称flot-memo.
&div id=&flot-memo& style=&text-align:height:30width:250height:20text-align:margin:0 auto&&&/div&
要使用"plothover"事件前,需要将选项中的grid.hoverable设为true,如此才能在鼠标移过图表上方时触发事件.
hoverable: true
再来建立一个自定义函式叫&showMemo&,在函式里绑定"plothover"事件的,此事件传入item对象,我们就可以从item.series.color取得资料序列的颜色,从item.series.label取得数据的卷标名称,最后就是我们要的原始数据,从item.series.data可以取得鼠标停留在区块上方时该区块的数据,
而item.series.data[0][1]就是我们要的数据.最后再把数据显示在#flot-memo里即可.
$.fn.showMemo = function () {
$(this).bind(&plothover&, function (event, pos, item) {
if (!item) { }
var html = [];
var percent = parseFloat(item.series.percent).toFixed(2);
html.push(&&div style=\&border:1background-color:&,
item.series.color,
&&span style=\&color:white\&&&,
item.series.label,
$.formatNumber(item.series.data[0][1], { format: &#,###&, locale: &us& }),
& (&, percent, &%)&,
&&/span&&,
&&/div&&);
$(&#flot-memo&).html(html.join(''));
最后呼叫$.plot并带入数据及选项, 并且别忘了呼叫showMemo().
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataSet, options);
$("#flot-placeholder").showMemo();
其它圆饼图
圆饼图还支持其它不同的类型,以下展示几种不同类型的圆饼图
倾斜圆饼图范例
倾斜圆饼图选项程序代码
var options = {
show: true,
甜甜圈圆饼图范例
甜甜圈圆饼图选项程序代码
var options = {
show: true,
innerRadius: 0.5,
show: true
本章的完整范例程序代码可以在这里找到并做在线练习<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&

我要回帖

更多关于 如何画折线图 的文章

 

随机推荐