langhua9527 2011-08-24 14:32 采纳率: 0%
浏览 300
已采纳

求EXT2.0 画图解放方案

求EXT2.0 图画解放方案
就是像柱状，饼状，线等等的
EXT2.0的，能用的，谢谢了

  • 写回答

5条回答 默认 最新

  • qq1988627 2011-09-06 09:47
    关注

    //pieChart.js
    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) {
    Ext.ux.pieChart.superclass.onRender.call(this, ct, position);
    this.ct = Ext.get(ct);

    this.createCanvas(ct);
    },
    createCanvas : function(ct) {
    //if (!this.el) {

    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.el = Ext.get(this.el);
    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) {
    //if(ctx){var m=5};
    //alert(m);
    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;
    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];
        alert("xx");
    }
    //this.shadow ? this.makeShadow() : '';
},
makeShadow : function() {
    var c = {
        x : this.circleX,
        y : this.circleY,
        r : this.radius
    }
    //this.ctx.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");
},

afterRender : function() {
    Ext.ux.pieChart.superclass.afterRender.apply(this, arguments);
    var context = this.ctx;
    this.drawCircle(context);
    // this.drawLabel(context);
},
setCanvasSize : function(w, h) {
    this.el.setSize(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('xx');
    });

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Tween
    <script type="text/javascript" src="excanvas.js"></script>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript"  src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>           
    <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>  
<script type="text/javascript" src="javascript/BaseChart.js"></script>  
    <script type="text/javascript" src="javascript/BalloonTip.js"></script> 
<script type="text/javascript" src="javascript/Zline.js"></script>

    <br> /*修正check-group,radio-group*/<br> .x-form-check-wrap,.x-form-radio-wrap{<br> padding:3px 0 0 0;<br> line-height:15px;width:100px;<br> }<br> .x-form-check-group .x-form-check-wrap,.x-form-radio-group .x-form-radio-wrap{<br> height:15px;<br> }<br> .ext-ie .x-form-check-group .x-form-check-wrap,.ext-ie .x-form-radio-group .x-form-radio-wrap{<br> height:17px;<br> }<br><br>


    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

悬赏问题

  • ¥15 易优eyoucms关于二级栏目调用的问题
  • ¥15 寻找公式识别开发，自动识别整页文档、图像公式的软件
  • ¥15 为什么eclipse不能再下载了？
  • ¥15 编辑cmake lists 明明写了project项目名，但是还是报错怎么回事
  • ¥15 关于#计算机视觉#的问题：求一份高质量桥梁多病害数据集
  • ¥15 特定网页无法访问，已排除网页问题
  • ¥50 如何将脑的图像投影到颅骨上
  • ¥15 提问一个关于vscode相关的环境配置问题，就是输入中文但是显示不出来，代码在idea可以显示中文，但在vscode不行，不知道怎么配置环境
  • ¥15 netcore使用PuppeteerSharp截图
  • ¥20 这张图页头，页脚具体代码该怎么写？