- 浏览: 466289 次
- 性别:
- 来自: 南京
文章分类
最新评论
-
a1439226817:
能不能发下源码1439226817@qq.com
ExtJsCRUD组件实现 -
w923690968:
[list][*]引用[u][/u][/list]
[JS]Drag And Drop -
zhumingyuan:
您好!用的的是3.2.3版本,按照您的方法配置了一下,但是还是 ...
spring vmc3.1.1 下,通过AnnotationMethodHandlerAdapter配置webBindingInitializer失效解决方案 -
sumo084:
我把xDarkness-MultClrBubble-1.0.j ...
JAVA实现类泡泡屏保效果 -
sumo084:
求源码,楼主好人,630483738@qq.com,谢谢
JAVA实现类泡泡屏保效果
代码比较简单,需要注意的一点就是:
如果想让饼图的边框显示出来,需要找到excanvas.js中的contextPrototype.stroke方法,将其最后一行代码注释掉
contextPrototype.stroke = function(aFill) {
// this.currentPath_ = [];
};
使用了extjs的组件生命周期,如果不采用extjs也很简单,将所有extjs的方法自行实现即可
代码如下:
如果想让饼图的边框显示出来,需要找到excanvas.js中的contextPrototype.stroke方法,将其最后一行代码注释掉
contextPrototype.stroke = function(aFill) {
// this.currentPath_ = [];
};
使用了extjs的组件生命周期,如果不采用extjs也很简单,将所有extjs的方法自行实现即可
代码如下:
Ext.ns('Ext.ux'); Ext.ux.pieChart = Ext.extend(Ext.BoxComponent, { circleX : 0, circleY : 0, data : undefined, labels : [], labelX : 0, labelY : 0, radius : 100, onRender : function(ct, position) { this.base(ct, position); this.ct = Ext.get(ct); this.createCanvas(ct); }, afterRender : function() { this.base(arguments); var context = this.ctx; this.drawCircle(context); }, createCanvas : function(ct) { var canvas = document.createElement("canvas"); this.ct.dom.appendChild(canvas); this.el = Ext.get(canvas); if (Ext.isIE && G_vmlCanvasManager) this.el = Ext.get(G_vmlCanvasManager.initElement(canvas)); this.setCanvasSize(this.width, this.height); this.canvas = Ext.getDom(this.el); this.el.position('absolute', this.zIndex); this.ctx = this.getContext(); }, drawCircle : function(ctx) { this.shadow ? this.makeShadow() : ''; var total = 0; for (var i = 0; i < this.data.length; i++) total += this.data[i][1]; this.startangle = -Math.PI / 2;// canvas 的arc采用PI方式的角度进行计算,2PI表示360° ctx.lineWidth = 2; ctx.strokeStyle = "black"; for (var i = 0; i < this.data.length; i++) {// 画每块扇片及其说明 var d = this.data[i]; this.endangle = this.startangle + d[1] / total * Math.PI * 2; ctx.beginPath(); ctx.moveTo(this.circleX, this.circleY);// 画扇片 ctx.arc(this.circleX, this.circleY, this.radius, this.startangle, this.endangle, false); ctx.closePath(); ctx.fillStyle = d[2]; ctx.fill(); ctx.stroke(); this.startangle = this.endangle; ctx.fillStyle = d[2];// 画说明 ctx.fillRect(this.labelX, this.labelY + 30 * i, 20, 20); ctx.strokeRect(this.labelX, this.labelY + 30 * i, 20, 20); var label = Ext.get(this.ct).createChild();// 扇形的文字说明 label.position('absolute'); label.setLeftTop(this.labelX + 30, this.labelY + 30 * i - 4); label.dom.innerHTML = this.labels[i] || d[0]; } }, makeShadow : function() { var c = { x : this.circleX, y : this.circleY, r : this.radius } //this.ctx.beginPath(); 当this.ctx.currentPath_中不存在任何元素时,就可以不调用beginPath this.ctx.arc(c.x + 5, c.y + 5, c.r, 0, Math.PI * 2, false) this.ctx.closePath(); var radgrad = this.ctx.createRadialGradient(c.x + 5, c.y + 5, 0, c.x + 5, c.y + 5, c.r); radgrad.addColorStop(0, '#555555'); this.ctx.fillStyle ='#555555'; this.ctx.fill(); }, getContext : function() { return this.el.dom.getContext("2d"); }, setCanvasSize : function(w, h) { this.el.set( { width : w, height : h }); } }); Ext.onReady(function() { var pie = new Ext.ux.pieChart( { width : 600, height : 400, shadow : true, data : [['North', 12, 'red'], ['South', 23, 'blue'], ['East', 34, 'yellow'], ['West', 45, 'green']], circleX : 200, circleY : 200, labelX : 400, labelY : 100, radius : 150 }); pie.render(Ext.getBody()); });
contextPrototype.stroke = function(aFill) { this.currentPath_ = []; };的效果
contextPrototype.stroke = function(aFill) { // this.currentPath_ = []; };的效果
发表评论
-
google浏览器书签账号登陆不上解决方案
2011-10-10 09:22 760问题: 最近google浏览器书签同步账号登陆不上 ... -
Dom多事件注册
2010-12-15 15:28 1173今天看到这样一段代码,如下: Page.clickFunc ... -
DOM中cloneNode的使用之旅
2010-10-21 14:52 2531struts2中可以自动封装表单提交过来的参数 List< ... -
Tab键控制页面中元素获取焦点顺序
2010-08-19 17:35 4092修改默认Tab键按键触发,界面元素获取焦点的顺序 此方法 ... -
JS-自动提示组件
2010-08-19 17:23 1783注:源自Ajax实战 实现自动提示功能: <!DOCT ... -
js实现在图片上画矩形框
2010-08-18 16:10 10824JS组件: @author Darkness @versio ... -
JS控制输入字符长度
2009-11-09 10:50 5543<script language="Jav ... -
internet explorer 无法打开 Internet站点 已中止操作
2009-09-26 18:20 2150JavaScript使IE的经典异常 代码 http://ww ... -
fusioncharts相关问题
2009-09-26 15:59 1770中文问题 使用UTF-8 or GBK,X 轴正常, ... -
js日期时间函数
2009-09-20 17:28 1177Date.prototype.isLeapYear 判断闰 ... -
IE6 png 透明 (三种解决方法)
2009-09-14 14:49 2037FF和IE7已经直接支持透明的png图了,下面这个主要是解决I ... -
类似MSN的消息提示
2009-08-18 11:00 961<html> <head> ... -
IE6的“错误:53 存储空间不足,无法完成此操作”解决方法
2009-08-07 21:10 7985一法: 打开注册表, ... -
表格边框的隐藏
2009-08-07 09:19 2624代码如下: <html> <he ... -
JS操作VML
2009-08-03 14:52 2790可以用鼠标拖动这条线,效果如图: 说明:还有一些bug, ... -
javascript技巧大全 (3)
2009-03-06 12:36 1117... -
javascript技巧大全(2)
2009-03-06 12:33 1314进入页面<meta http-equiv="P ... -
javascript技巧大全(1)
2009-03-06 12:32 1176事件源对象 event.srcElement.tagName ... -
javascript性能优化
2009-02-27 10:56 4353很久就想总结一下关于javascript性能优化方面的一些东西 ... -
JavaScript DOM笔记:修改DOM
2009-02-27 10:51 2257常用函数: creat ...
相关推荐
这时,我们需要在jqPlot前端加载Excanvas.js,这样jqPlot就能利用Excanvas.js提供的VML功能,实现在不支持Canvas的IE浏览器上显示图表。 使用Excanvas.js的过程大致如下: 1. 在HTML文档的`<head>`部分引入jQuery...
`excanvas.js`是一个重要的辅助库,它提供了对老版本IE浏览器的Canvas元素的支持,因为这些浏览器原生不支持Canvas,而EASY饼图插件很可能依赖于Canvas来绘制图形。 `demo.html`是示例文件,展示了如何在实际项目中...
Excanvas是基于Vml(Vector Markup Language)的一个实现,用于在不支持Canvas的浏览器上模拟Canvas的功能,确保了跨浏览器的兼容性。 JavaScript图形渲染在现代Web开发中扮演着至关重要的角色,它不仅用于创建交互...
结合这些信息,我们可以推测这个工具是一个基于jQuery的图表库,利用Prototype.js提供DOM操作,ProtoChart.js包含了图表的实现逻辑,而excanvas.js确保了在旧版IE浏览器中也能正常显示图表。用户在使用时,需要将...
ECharts JavaScript图表库提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图...
- **stack**:实现堆叠图,方便对比各组数据的总和。 - **cursor**:添加鼠标光标,展示当前坐标值。 - **selection**:允许用户通过拖动选择图表区域,进行数据聚焦。 通过合理组合和定制,jQuery Flot 可以满足...
5. **绘图库**:"excanvas.min.js"是一个JavaScript库,用于在不支持Canvas元素的旧版IE浏览器中模拟Canvas API。因为Flot和其他很多现代图表库依赖Canvas绘制图形,所以这个库对于兼容旧浏览器至关重要。 6. **API...
它在现代支持HTML5的浏览器上使用canvas元素来绘制图表,而在不支持canvas的旧版IE浏览器(如IE9以下版本)中,则依赖excanvas.js库来实现兼容。 要使用jqPlot,首先需要引入必要的脚本文件,包括jQuery库(至少...
本教程将详细介绍如何利用jQuery和Flot来实现动态、美观的统计图表。 首先,让我们了解一下jQuery。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互,使得开发者能够更快速、...
它提供了丰富的图表类型,如柱状图、折线图、饼图以及各种复杂的数据仪表盘。然而,由于ECharts的设计和实现主要面向现代浏览器,它在一些老旧的浏览器,特别是 Internet Explorer 8(IE8)上可能会遇到兼容性问题。...
(IE8- power by excanvas )</p><p>特色 我们诚挚邀请你翻阅这份在线文档 《 Why ECharts ? 》 你可以从中更直观的体验到ECharts的特性以及快速浏览到所有图表类型。 *文档中展现的个别特性在IE8-中并没有得到支持...
底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图,同时...
总的来说,jqPlot提供了一套全面的API,使得开发者能够灵活地构建各种复杂的图表,同时结合RIA应用开发,可以实现动态更新、交互操作等功能,极大地提升了Web应用的数据展示能力。通过深入学习和实践,开发者可以...
**JqChart** 是一个基于jQuery的图表插件,它提供了一系列丰富的图表类型,如柱状图、折线图、饼图等。JqChart以其高度自定义和灵活的API,使得开发者能够轻松地创建美观且功能强大的图表。为了使用JqChart,我们...
通过`jquery.jqplot.js`和`jquery.jqplot.min.js`这两个主要的JavaScript文件,开发者可以实现各种类型的图表,包括折线图、柱状图、饼图以及散点图等。同时,为了提高性能和页面加载速度,`jquery.min.js`确保了...
你可以设置`pie.show`为`true`来开启饼图绘制: ```javascript var data = [ {x: 1, y: 4, label: 'A'}, {x: 2, y: 7, label: 'B'}, {x: 3, y: 5, label: 'C'} ]; Flotr.draw(canvas, [data], {type: 'pie'})...
- **多样化图表**:ECharts支持折线图、柱状图、饼图、散点图、地图、力导向图等多种图表类型,适用于各种数据分析场景。 - **交互性**:用户可以通过鼠标或触摸进行缩放、平移、选择区域等操作,增强数据探索体验...
在Web开发中,jQuery是一个广泛使用的JavaScript库,它简化了DOM...开发者可以根据项目需求和预算选择合适的插件,以实现高效、美观的数据可视化。无论是在商业网站还是非营利组织的网页中,都能找到它们的用武之地。
jqPlot 是一款基于 jQuery 的图表插件,专用于创建各种数据可视化图表,如折线图、柱状图、饼图等。它在支持 HTML5 的现代浏览器中利用 Canvas 元素绘制图表,而在不支持 Canvas 的旧版 IE 浏览器(如 IE9 以下版本...
Jqplot 是一个基于 jQuery 的图表绘制插件,它可以用来创建多种类型的图表,包括折线图、柱状图、饼图等。该插件支持丰富的配置选项,允许用户自定义图表样式和行为。在本篇文章中,我们将详细介绍如何使用 Jqplot ...