花生米AJAX-UI系列之:基于JQUERY的PieChart统计用饼图0.1版
特点:
本功能类是建立在JQUERY1.3.2的基础之上
//feature:
//1.饼图的标题,各种数据的颜色、名称及数量均可自定义,总数量将交由控件自动算出
//2.饼图的圆心所在CANVAS中的位置,饼图的半径,每个色区中显示数值的类型都可自定义
//3.饼图的CANVAS,颜色说明在relative定位模式的content内容框中均为absolute定位模式,用户可根据需要自行定义它们的长宽,上边距和左边距,以及排列方式
//4.可动态用AJAX方式远程载入要显示的一组数据。
//5.本品不含任何图片.
//6.经测试,兼容IE6--IE8,Firefox,chrome浏览器,在非IE浏览器下更加美观:)。
-------------------------------------------------------
/*进度条定义-GooProgress类*/
//div :要被绑定的已被JQUERY封装的DOM对象,必须要有其ID
//property :JSON变量,PieChart的详细参数设置,说明见下文
function GooPieChart(div,property)
类内成员变量:
this.$div: 被绑定构造为PieChart控件的JQUERY对象,原型一般为一个DIV
this.$content: this.$div内部的独立与标题栏之外的内容框,JQUERY对象
this.$tip: 用来作QUICKTIP提示的JQUERY对象
this.$canvas: 控件中的canvas画板,dom对象
this.$canvas_left:canvas画板的X轴定位
this.$canvas_top:canvas画板的Y轴定位
this.$canvas_width:canvas画板的宽度
this.$canvas_height:canvas画板的高度
this.$ctx: this.$ctx=this.$canvas.getContext('2d');
this.$painted: 判断原来CANVAS中是否已经画过 true/false
this.$core_x: 圆饼中心在CANVAS中的X坐标
this.$core_y: 圆饼中心在CANVAS中的Y坐标
this.$radius: 圆饼的半径
this.$items: 数据内容列表,为一个JSON数组
this.$note: 数据种类列表,为一个JSON数组,以this.$items:中的id值为其索引值
this.$total: 所有数据的总量之和
-----------------------------------------------------------------------------------
方法:
//设置/初始化饼图的标题及单位说明
this.setTitle(title,units)
//设置圆饼的外观,三个参数,为饼的中心在CANVAS中的顶距、左边距,半径
this.setPieShow=function(core_x,core_y,radius)
//初始化饼图的数据种类数量,以及数据类型说明框,参数dataKind见下文
this.setDataKind(dataKind)
//显示提示栏,参数从左至右依次为:显示时定位的左边距,上边距,显示内容索引值,例:显示内容为this.$items(数据内容列表)中的第index+1个内容
this.showTip=function(x,y,index)
//隐藏提示栏
this.hideTip()
//清除CANVAS画板上的内容数据
this.clearCanvas()
//载入具体内容,并渲染饼图传参
//data为一个JSON变量数组,其说明见下文
//show决定了饼图里直接显示的是具体数值还是百分比,值只有"percent","num"两种
//totalUnit是否不为null,决定了饼图是否显示总数量,其值中必须带有" &d "字串,作为总数量数值的被替换符号
this.loadPieData(data,show,totalUnit)
//远程载入数据
//除了后两个参数与this.loadPieData方法中的相同外,其余前5个参均为AJAX远程连接时用到,与$.ajax方法中的传参相似
this.loadPieDataAjax(url,para,type,dataType,show,totalUnit)
-------------------------------------------------------------------
最重要的传参:property,构造函数中要用到的:
var property={
con_width:600, //content内容框的宽度
con_height:400, //content内容框的高度
canvas_width:320, //canvas画板的宽度
canvas_height:320,//canvas画板的高度
canvas_top:40, //canvas画板的Y轴定位
canvas_left:80, //canvas画板的X轴定位
core_x:160, //圆饼中心在CANVAS中的X坐标
core_y:160, //圆饼中心在CANVAS中的Y坐标
radius:150 //圆饼的半径
}
setDataKind方法中的传参: dataKind
var dataKind={
note_width:100,//颜色说明栏的宽度
note_height:180,//颜色说明栏的高度
note_top:30,//颜色说明栏的Y轴定位
note_left:460,//颜色说明栏的X轴定位
sort_type:"v",//颜色说明栏中单元的排列方式,v为垂直,h为水平
text_color:"#ffffff",//饼内的文字的颜色,可不填,默认为纯黑
items:[
{id:"c1",color:"#0054A6",label:"PC电源"},
{id:"c2",color:"#0072BC",label:"游戏笔记本"},
{id:"c3",color:"#00A99D",label:"PC机箱"},
{id:"c4",color:"#00A651",label:"玩家主板"},
{id:"c5",color:"#8DC63F",label:"IGAME显卡"},
{id:"c6",color:"#F8F200",label:"键盘鼠标"},
{id:"c7",color:"#F7941D",label:"游戏手柄"},
{id:"c8",color:"#F26522",label:"超频内存"},
{id:"c9",color:"#ED1C24",label:"PC散热器"}
]//items为JSON数据,决定了数据总类/名称,颜色,索引ID的定义
};
loadPieData方法中的传参: data(即为要显示渲染的具体数据内容),因为内容格式简单,这里就不多介绍了:)
var data=[
{id:"c1",num:100},
{id:"c2",num:150},
{id:"c3",num:100},
{id:"c4",num:150},
{id:"c5",num:100},
{id:"c6",num:100},
{id:"c7",num:50},
{id:"c8",num:100},
{id:"c9",num:200}
];