`
xrqsjj
  • 浏览: 21050 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

基于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无效。

相关推荐

    自创的基于JQUERY的PieChart统计用饼图

    本功能类是建立在JQUERY1.3.2的基础之上 //feature: //1.饼图的标题,各种数据的颜色、名称及数量均可自定义,总数量将交由控件自动算出 //2.饼图的圆心所在CANVAS中的位置,饼图的半径,每个色区中显示数值的类型都...

    基于jquery和googleapi的统计图js控件

    基于jQuery和Google API的统计图JS控件是实现这一目标的高效工具。本控件允许开发者将网页中的table元素直接转换为各种图表,如柱状图、饼图和折线图,提供了一种直观、简洁的方式来呈现数据。 首先,我们来深入...

    jquery json饼图插件

    而"jQuery JSON饼图插件"正是这样的一个工具,它允许开发者通过简单的API,将JSON格式的数据转换成直观的饼图,适用于统计分析和展示。 ### 插件概述 jQuery JSON饼图插件主要面向那些希望快速、轻松地创建饼图的...

    pieChart:用于创建饼图的jquery插件

    pieChart是一个基于jQuery的饼图插件,它提供了创建和定制饼图的简便方法,适合用于网页数据可视化。通过利用其灵活性和交互性,开发者可以为用户提供直观且吸引人的数据展示。在实际项目中,结合其他前端技术和后端...

    jquery html5 图表用canvas绘制一个动画圆形饼图

    jQuery则是一个广泛使用的JavaScript库,它简化了DOM操作,事件处理,动画效果以及Ajax交互。当jQuery与HTML5 Canvas结合时,可以轻松地创建出动态的、具有动画效果的图表,比如圆形饼图。在这个场景中,我们将深入...

    java利用jQuery生成饼图,折线图,柱状图

    在jQuery中,我们可以使用Highcharts库来创建饼图。首先,引入Highcharts的JavaScript文件,然后在HTML中定义一个容器元素,接着用JavaScript编写配置项,包括数据、颜色、标题等。例如: ```html ...

    jquery用来制作统计图形

    在"jquery用来制作统计图形"这个主题中,我们将深入探讨如何利用jQuery和相关的插件来创建各种数据可视化图表,如饼图、折线图和柱状图。 首先,jQuery的核心功能是提供了一套简洁的API来处理HTML文档对象模型(DOM...

    jQuery饼图服务器资源统计特效代码

    本文将深入探讨如何利用jQuery实现饼图来统计服务器资源,如访问量、跳出率、负载和使用情况等。 ### 1. jQuery饼图的基本概念 jQuery饼图是一种以圆形展示数据比例的图表,每个扇区代表一种类别,其大小与该类别...

    asp.net中绘制饼图柱状图

    2. **JQuery插件**:例如jQuery UI的piechart或第三方库如Chart.js、Highcharts等。这些JavaScript库可以通过AJAX技术与服务器端的ASP.NET进行交互,获取数据并在客户端绘制饼图。优点是交互性强,但需要一定的前端...

    基于juery的各种图表

    当涉及到数据可视化时,jQuery可以与各种图表库结合使用,帮助开发者创建出直观且吸引人的饼图、条形图和折线图。本文将深入探讨如何利用jQuery和相关图表库来实现这些图表。 首先,jQuery本身并不直接支持图表绘制...

    ASP与VML生成图表的示例

    文件名列表中没有具体的文件内容,但可能包括如`PieChart.asp`、`ColumnChart.asp`和`LineChart.asp`这样的文件,分别对应饼图、柱图和折线图的示例。 在实际应用中,这样的系统可以用于创建交互式的仪表板,用户...

    gvChart 图表插件

    3. **图表类型**:gvChart支持多种图表类型,如`'ColumnChart'`(柱状图)、`'PieChart'`(饼图)、`'LineChart'`(折线图)等,通过设置`type`参数来选择。 4. **配置选项**:可以设置各种配置参数来自定义图表...

    一个fusionchart deom

    4. **易于集成**:由于FusionCharts基于JavaScript,因此可以轻松地与各类Web框架(如jQuery、AngularJS、React等)和服务器端技术(如PHP、ASP.NET、Node.js等)结合使用。 在"自己做的连接数据库的一个...

    ssh整合jchartfree

    例如,创建饼图时,可以使用`PieChart chart = new PieChart();`,然后设置数据和属性。 3. **生成图像流**:通过调用`chart.getImageStream()`方法,生成图表的图像流。这个流可以直接发送到HTTP响应。 4. **配置...

    jqplot饼状图示例

    在本示例中,我们将专注于如何使用jqPlot来创建饼状图,这是一种常见的统计图表类型,用于展示各部分占整体的比例。 **饼状图的基础** 饼状图由一个圆形区域划分成多个扇形段,每个扇形代表数据集中的一个类别,其...

    html5制作柱形图

    接着,使用jQuery选择器初始化Raphael对象,并传递一些基本参数(如位置和大小)以及数据和选项。 ```javascript var options = { stacked: false, gutter: 20, axis: "0011", // 控制轴标签的位置 axisystep: ...

    Echarts后台获取数据绑定详细样例

    接下来,我们使用 `require` 加载 ECharts 和饼图模块,并调用 `displayChart` 函数来初始化图表。 ```javascript require( [ 'echarts', 'echarts/chart/pie' ], displayChart ); ``` 在 `displayChart` ...

    primefaces指南

    **PrimeFaces**是一款基于JavaServer Faces(JSF)的开源用户界面组件库。它提供了丰富的组件集合,旨在简化Web应用开发流程,并提高开发效率。PrimeFaces不仅支持最新的HTML5标准,还包含了大量实用的功能特性,如...

    primefaces英文手册

    **PrimeFaces**是一款基于JavaServer Faces(JSF)的开源UI组件库,旨在提供一套丰富的用户界面组件,简化Web应用开发流程,并提升用户体验。该手册详尽地介绍了PrimeFaces的安装配置方法及其众多组件的使用方式。 ...

Global site tag (gtag.js) - Google Analytics