`

excanvas饼图实现

阅读更多
代码比较简单,需要注意的一点就是:
如果想让饼图的边框显示出来,需要找到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_ = [];
};的效果






  • 大小: 62 KB
  • 大小: 75.4 KB
  • 大小: 71.7 KB
  • 大小: 52.7 KB
分享到:
评论

相关推荐

    excanvas.js--图形JS

    这时,我们需要在jqPlot前端加载Excanvas.js,这样jqPlot就能利用Excanvas.js提供的VML功能,实现在不支持Canvas的IE浏览器上显示图表。 使用Excanvas.js的过程大致如下: 1. 在HTML文档的`&lt;head&gt;`部分引入jQuery...

    一款新型的EASY饼图数据统计Jquery插件

    `excanvas.js`是一个重要的辅助库,它提供了对老版本IE浏览器的Canvas元素的支持,因为这些浏览器原生不支持Canvas,而EASY饼图插件很可能依赖于Canvas来绘制图形。 `demo.html`是示例文件,展示了如何在实际项目中...

    js.zip_javascript_javascript 图形_js_js graphics

    Excanvas是基于Vml(Vector Markup Language)的一个实现,用于在不支持Canvas的浏览器上模拟Canvas的功能,确保了跨浏览器的兼容性。 JavaScript图形渲染在现代Web开发中扮演着至关重要的角色,它不仅用于创建交互...

    图表验证工具

    结合这些信息,我们可以推测这个工具是一个基于jQuery的图表库,利用Prototype.js提供DOM操作,ProtoChart.js包含了图表的实现逻辑,而excanvas.js确保了在旧版IE浏览器中也能正常显示图表。用户在使用时,需要将...

    ECharts JavaScript图表库 v5.2.1.zip

    ECharts JavaScript图表库提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图...

    JQuery Flot 统计图

    - **stack**:实现堆叠图,方便对比各组数据的总和。 - **cursor**:添加鼠标光标,展示当前坐标值。 - **selection**:允许用户通过拖动选择图表区域,进行数据聚焦。 通过合理组合和定制,jQuery Flot 可以满足...

    jquery图表插件

    5. **绘图库**:"excanvas.min.js"是一个JavaScript库,用于在不支持Canvas元素的旧版IE浏览器中模拟Canvas API。因为Flot和其他很多现代图表库依赖Canvas绘制图形,所以这个库对于兼容旧浏览器至关重要。 6. **API...

    jqPlot图表中文API

    它在现代支持HTML5的浏览器上使用canvas元素来绘制图表,而在不支持canvas的旧版IE浏览器(如IE9以下版本)中,则依赖excanvas.js库来实现兼容。 要使用jqPlot,首先需要引入必要的脚本文件,包括jQuery库(至少...

    Jquery统计图表

    本教程将详细介绍如何利用jQuery和Flot来实现动态、美观的统计图表。 首先,让我们了解一下jQuery。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互,使得开发者能够更快速、...

    ECHARTS仪表盘IE8不兼容修复

    它提供了丰富的图表类型,如柱状图、折线图、饼图以及各种复杂的数据仪表盘。然而,由于ECharts的设计和实现主要面向现代浏览器,它在一些老旧的浏览器,特别是 Internet Explorer 8(IE8)上可能会遇到兼容性问题。...

    ECharts JavaScript图表库-其他

     (IE8- power by excanvas )&lt;/p&gt;&lt;p&gt;特色 我们诚挚邀请你翻阅这份在线文档 《 Why ECharts ? 》 你可以从中更直观的体验到ECharts的特性以及快速浏览到所有图表类型。 *文档中展现的个别特性在IE8-中并没有得到支持...

    ECharts v4.2.1 rc1

    底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图,同时...

    RIA应用开发:11-jQuery图表插件.ppt

    总的来说,jqPlot提供了一套全面的API,使得开发者能够灵活地构建各种复杂的图表,同时结合RIA应用开发,可以实现动态更新、交互操作等功能,极大地提升了Web应用的数据展示能力。通过深入学习和实践,开发者可以...

    ajax读取数据jqchart图表显示

    **JqChart** 是一个基于jQuery的图表插件,它提供了一系列丰富的图表类型,如柱状图、折线图、饼图等。JqChart以其高度自定义和灵活的API,使得开发者能够轻松地创建美观且功能强大的图表。为了使用JqChart,我们...

    jquery.jqplot.1.0.9.d96a669

    通过`jquery.jqplot.js`和`jquery.jqplot.min.js`这两个主要的JavaScript文件,开发者可以实现各种类型的图表,包括折线图、柱状图、饼图以及散点图等。同时,为了提高性能和页面加载速度,`jquery.min.js`确保了...

    Flotr2图形插件

    你可以设置`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完整版

    - **多样化图表**:ECharts支持折线图、柱状图、饼图、散点图、地图、力导向图等多种图表类型,适用于各种数据分析场景。 - **交互性**:用户可以通过鼠标或触摸进行缩放、平移、选择区域等操作,增强数据探索体验...

    5个最顶级jQuery图表类库插件【jquery插件库】

    在Web开发中,jQuery是一个广泛使用的JavaScript库,它简化了DOM...开发者可以根据项目需求和预算选择合适的插件,以实现高效、美观的数据可视化。无论是在商业网站还是非营利组织的网页中,都能找到它们的用武之地。

    jqPlot 图表中文API使用文档及源码和在线示例

    jqPlot 是一款基于 jQuery 的图表插件,专用于创建各种数据可视化图表,如折线图、柱状图、饼图等。它在支持 HTML5 的现代浏览器中利用 Canvas 元素绘制图表,而在不支持 Canvas 的旧版 IE 浏览器(如 IE9 以下版本...

    jQuery插件 Jqplot图表实例

    Jqplot 是一个基于 jQuery 的图表绘制插件,它可以用来创建多种类型的图表,包括折线图、柱状图、饼图等。该插件支持丰富的配置选项,允许用户自定义图表样式和行为。在本篇文章中,我们将详细介绍如何使用 Jqplot ...

Global site tag (gtag.js) - Google Analytics