花生米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}
];
分享到:
相关推荐
本功能类是建立在JQUERY1.3.2的基础之上 //feature: //1.饼图的标题,各种数据的颜色、名称及数量均可自定义,总数量将交由控件自动算出 //2.饼图的圆心所在CANVAS中的位置,饼图的半径,每个色区中显示数值的类型都...
基于jQuery和Google API的统计图JS控件是实现这一目标的高效工具。本控件允许开发者将网页中的table元素直接转换为各种图表,如柱状图、饼图和折线图,提供了一种直观、简洁的方式来呈现数据。 首先,我们来深入...
而"jQuery JSON饼图插件"正是这样的一个工具,它允许开发者通过简单的API,将JSON格式的数据转换成直观的饼图,适用于统计分析和展示。 ### 插件概述 jQuery JSON饼图插件主要面向那些希望快速、轻松地创建饼图的...
pieChart是一个基于jQuery的饼图插件,它提供了创建和定制饼图的简便方法,适合用于网页数据可视化。通过利用其灵活性和交互性,开发者可以为用户提供直观且吸引人的数据展示。在实际项目中,结合其他前端技术和后端...
jQuery则是一个广泛使用的JavaScript库,它简化了DOM操作,事件处理,动画效果以及Ajax交互。当jQuery与HTML5 Canvas结合时,可以轻松地创建出动态的、具有动画效果的图表,比如圆形饼图。在这个场景中,我们将深入...
在jQuery中,我们可以使用Highcharts库来创建饼图。首先,引入Highcharts的JavaScript文件,然后在HTML中定义一个容器元素,接着用JavaScript编写配置项,包括数据、颜色、标题等。例如: ```html ...
在"jquery用来制作统计图形"这个主题中,我们将深入探讨如何利用jQuery和相关的插件来创建各种数据可视化图表,如饼图、折线图和柱状图。 首先,jQuery的核心功能是提供了一套简洁的API来处理HTML文档对象模型(DOM...
本文将深入探讨如何利用jQuery实现饼图来统计服务器资源,如访问量、跳出率、负载和使用情况等。 ### 1. jQuery饼图的基本概念 jQuery饼图是一种以圆形展示数据比例的图表,每个扇区代表一种类别,其大小与该类别...
2. **JQuery插件**:例如jQuery UI的piechart或第三方库如Chart.js、Highcharts等。这些JavaScript库可以通过AJAX技术与服务器端的ASP.NET进行交互,获取数据并在客户端绘制饼图。优点是交互性强,但需要一定的前端...
当涉及到数据可视化时,jQuery可以与各种图表库结合使用,帮助开发者创建出直观且吸引人的饼图、条形图和折线图。本文将深入探讨如何利用jQuery和相关图表库来实现这些图表。 首先,jQuery本身并不直接支持图表绘制...
文件名列表中没有具体的文件内容,但可能包括如`PieChart.asp`、`ColumnChart.asp`和`LineChart.asp`这样的文件,分别对应饼图、柱图和折线图的示例。 在实际应用中,这样的系统可以用于创建交互式的仪表板,用户...
3. **图表类型**:gvChart支持多种图表类型,如`'ColumnChart'`(柱状图)、`'PieChart'`(饼图)、`'LineChart'`(折线图)等,通过设置`type`参数来选择。 4. **配置选项**:可以设置各种配置参数来自定义图表...
4. **易于集成**:由于FusionCharts基于JavaScript,因此可以轻松地与各类Web框架(如jQuery、AngularJS、React等)和服务器端技术(如PHP、ASP.NET、Node.js等)结合使用。 在"自己做的连接数据库的一个...
例如,创建饼图时,可以使用`PieChart chart = new PieChart();`,然后设置数据和属性。 3. **生成图像流**:通过调用`chart.getImageStream()`方法,生成图表的图像流。这个流可以直接发送到HTTP响应。 4. **配置...
在本示例中,我们将专注于如何使用jqPlot来创建饼状图,这是一种常见的统计图表类型,用于展示各部分占整体的比例。 **饼状图的基础** 饼状图由一个圆形区域划分成多个扇形段,每个扇形代表数据集中的一个类别,其...
接着,使用jQuery选择器初始化Raphael对象,并传递一些基本参数(如位置和大小)以及数据和选项。 ```javascript var options = { stacked: false, gutter: 20, axis: "0011", // 控制轴标签的位置 axisystep: ...
接下来,我们使用 `require` 加载 ECharts 和饼图模块,并调用 `displayChart` 函数来初始化图表。 ```javascript require( [ 'echarts', 'echarts/chart/pie' ], displayChart ); ``` 在 `displayChart` ...
**PrimeFaces**是一款基于JavaServer Faces(JSF)的开源用户界面组件库。它提供了丰富的组件集合,旨在简化Web应用开发流程,并提高开发效率。PrimeFaces不仅支持最新的HTML5标准,还包含了大量实用的功能特性,如...
**PrimeFaces**是一款基于JavaServer Faces(JSF)的开源UI组件库,旨在提供一套丰富的用户界面组件,简化Web应用开发流程,并提升用户体验。该手册详尽地介绍了PrimeFaces的安装配置方法及其众多组件的使用方式。 ...