基于JQUERY的PieChart统计用饼图0.1版

花生米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}
  ];

评论

1 楼 qp3db 2011-05-06  

求点击每个色块的动作。
如：this.$canvas.onClick = function() {alert('123');};
在this.showTip下能获取到每个类的传值，this.$note[this.$items[index].id].label，我想增加一个效果在点击每个分类饼形，执行一个动作。
我自己测试给this.$ctx增加onclick无效。