当前位置:首页 > 开发 > Web前端 > 前端 > 正文

用Rapael做图表

发表于: 2014-09-02   作者:tntxia   来源:转载   浏览:
rap
摘要: function drawReport(paper,attr,data){          var width = attr.width;     var height = attr.height;          var max = 0;   &nbs

function drawReport(paper,attr,data){

    

    var width = attr.width;

    var height = attr.height;

    

    var max = 0;

    

    $.each(data,function(i,d){

        if(d.value>max){

            max = d.value;

        }

    });

 

max = max + (4-(max%4));

 

    var chartXStart = 30;

    var chartYStart = 10;

    

    var chartXEnd = chartXStart+width;

    var chartYEnd = chartYStart+height;

    

    for(var i=0;i<5;i++){

        

        var axis = (max-parseInt(max*i/4));

        var lineY = 10+i*(height/4);

        paper.text(10,lineY,axis);

        

        if(i!=0 && i!=4){

            

            var path = paper.path("M"+chartXStart+" "+lineY+"L"+chartXEnd+" "+lineY);

            path.attr({"fill":"red","stroke-opacity":0.5,"stroke-width":0.5});

        }

        

    }

    

    var path = paper.path("M"+chartXStart+" "+chartYStart+"L"+chartXStart+" "

            +chartYEnd+",M"+chartXStart+" "+chartYEnd+"L"+chartXEnd+" "+chartYEnd);

    

    path.attr({"arrow-end":'block-wide-midium',stroke:'blue'});

    

    var pathAttr = "";

    var mx = chartXStart + 20,my = 10;

    

    var points = [];

 

var dataSpan = 75;

    

    $.each(data,function(i,d){

        

        if(i==0){

            my = chartYEnd;

            if(max==0){

                my = chartYEnd;

            }else{

                my = chartYEnd - parseInt((100/max)*d.value);

            }

            mx += i*dataSpan;

        }else{

            var lx = mx + dataSpan;

            var ly = 100;

            if(max==0){

                ly = 100;

            }else{

                ly = chartYEnd - parseInt((100/max)*d.value);

            }

            if(pathAttr==""){

                pathAttr = "M"+mx+" "+my+"L"+lx+" "+ly;

            }else{

                pathAttr += ",M"+mx+" "+my+"L"+lx+" "+ly;

            }

            mx = lx;

            my = ly;

        }

        

        points.push({

            x:mx,

            y:my,

            data:d.value,

label:d.label

        });

        

    });

    

    var dataPath = paper.path(pathAttr);

    

    dataPath.attr({stroke:'yellow'});

    

    var showData;

    var backRect;

    

    $.each(points,function(i,d){

        var glow;

        

        var circle = paper.circle(d.x,d.y,3).attr({fill:'blue',cursor:'pointer'}).mouseover(function(){

            

            glow = this.glow({color:'blue',width:5});

            backRect = paper.rect(this.attrs.cx+15,this.attrs.cy-10,30,20,2);

            backRect.attr({fill:'white'});

            showData = paper.text(this.attrs.cx+30,this.attrs.cy,d.data);

            

        }).mouseout(function(){

            if(glow){

                glow.remove();

            }

            if(showData){

                showData.remove();

            }

            if(backRect){

                backRect.remove();

            }

        });

 

paper.text(d.x,chartYEnd+20,d.label);

    });

    

}

 

 

$(function(){

    

    var paper = new Raphael("report");

    var attr = {

        width:260,

        height:100

    }

 

$.post("json/getStatistics.php",function(data){

// 绘制横竖坐标

    drawReport(paper,attr,data);

},"json");

    

    

    

});

用Rapael做图表

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
《电脑爱好者》2011年10月版以特别策划的方式大篇幅刊登《谁说菜鸟不会数据分析》节选内容 <img
如果想在MVC中使用图表显示的话,DotNet.HighCharts是不错的选择。DotNet.HighCharts是一个开源的Ja
最近发现一个很有意思的新闻,还没有来得及有时间翻译,这里转发出来 Headless Connected Oscillosc
一直没好好研究过如何用AS设置渐变型填充。周日终于有些时间可以好好研究一下了。 在AS中,设置渐变
利用samba做域控制器 server2003做客户机加入域 1:开两台虚拟机 一台为Linux系统 一台为server2003
一、号外号外 号外号外,HTML官方logo华丽丽滴诞生了。您可以起官方logo页面(点击这里)其观摩。
服务端用Java web或red5 server即可,直播和收看都是用Flash Builder 4做的flash。 先看效果图: re
前言 在大数据时代,数据可视化技术显得至关重要。一个设计优雅的信息图,能在一个600px*400px的画
最近在看《Java Power Tools》,对UmlGraph很感兴趣,于是小研究了下。 UmlGraph可以将由源代码生成
最近在看《Java Power Tools》,对UmlGraph很感兴趣,于是小研究了下。 UmlGraph可以将由源代码生成
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号