用Rapael做图表

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");

    

    

    

});