(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
?
给出一个简单的结果:
?
?