首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

(JQuery)透过改写flot的pie插件实现一个speedo meter chart的flot插件

2012-10-12 
(JQuery)通过改写flot的pie插件实现一个speedo meter chart的flot插件由于项目中需要使用到speedo meter c

(JQuery)通过改写flot的pie插件实现一个speedo meter chart的flot插件

由于项目中需要使用到speedo meter chart,但是又不能使用flash(因为要支持iphone),而speedo的js插件网上貌似很难找到,找到了一个但是却不是很满意,因为没办法灵活的定义UI(如果有需要链接在这里http://plugins.jquery.com/project/speedometer),因为实现起来不是很复杂,而且刚好的flot插件中也有一个pie的plugin,想了一下通过修改这个plugin来实现的话就可以了,下面给出这个代码的api定义:

?

// 这里的API是flot相关的,具体还需参见flot的API定义

series: {

meter:{?// 定义了一个meter object,所有的参数定义都在这里show: true, ?// 是否显示该chartlabel: {?// 是否显示各个段的百分比及名称show: false},

radius: 1, ?// 圆的半径定义,数值是0-1,是一个比例值,基数是整个chart的宽度的一半,默认是1

innerRadius: 0.5, ?// 内圆的半径定义,也就是空白部分的范围,通过它来调整遮罩范围,也是一个比例值,同上,默认是0.5

currentValue: 0, // 当前此chart对应指针指定的数值,如果没有默认是0

pointerLength: 0.75, // 指针长度,是一个比例值,基数是radius的长度,默认是0.75

maxScale: 100, // 当前chart反应的最大值标量,如果没有输入默认显示100%,接受一个浮点型的数

title: 'the speedo chart' // chart的title,默认是speedo chart}

?

}

?

你还可以为chart所对应的div做css定义,这样的话就可以有不同的边框和背景了,可以根据你的网站样式作出不同的调整,而meter的颜色定义则还是由flot的定义给出,这里不做修改

?

下面贴出整个插件的源码:

?

?

?

?

使用的前置条件:需要引入flot的jquery组件,然后使用flot的API

?

给出一个简单的结果:

?


(JQuery)透过改写flot的pie插件实现一个speedo meter chart的flot插件

?

热点排行