富贵资源网 Design By www.hznty.com

支持 线性图 区域图 柱状图 饼图

支持多浏览器

用到的是svg  vml

复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>smipleChart</title>
<style type="text/css">
.cc{
height:450px; width:800px; border:1px solid #999; position:relative; margin:20px;
}
</style>
</head>
<body>
<div id='t'></div>
<div id='t1'></div>
<div id='line' class="cc"></div>
<div id='area' class="cc"></div>
<div id='zhu' class="cc"></div>
<div id='zhu1' class="cc" style="height:600px;"></div>
<div id='segmentx' class="cc"></div>
<div id='segmenty' class="cc"></div>
<div id='pie' class="cc"></div>
<div id='pies' class="cc"></div>
<div id='vv' class="cc" style='height:300px; width:520px;'></div>
<script type="text/javascript">
(function(doc,undefined){
 var win       = this,
  uuuid     = -1, 
  hasSVG    = win.SVGAngle || doc.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1"),
  isIE      = /msie/i.test(navigator.userAgent) && !win.opera,
  path      = hasSVG"boolean" ) {
   deep = target;
   target = arguments[1] || {};
   i = 2;
  }
  if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")
   target = {};
  for(;i<length;i++){
   if ( (options = arguments[ i ]) != null )
    for(var name in options){
     var src = target[ name ], copy = options[ name ];
     if ( target === copy )
      continue;
     if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
      target[ name ] = arguments.callee( deep, src || ( copy.length != null "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif'    
   });
  }
  span.innerHTML = txt || ''; 
  span.style.visibility = 'hidden';
  doc.body.appendChild(span);  
  var width  = span.offsetWidth,
   height = span.offsetHeight;
  doc.body.removeChild(span);
  return {w:width,h:height};
 };
 function angle(r,center,o,jingdu){
  var hudu = Math.PI*2*(o/360),
   x = center[0]+ r*Math.sin(hudu),
   y = center[1]+ -r*Math.cos(hudu);
  return [x.toFixed(jingdu||0),y.toFixed(jingdu||0)];  
 }
 function xx(a,b,lineNum){
  var t   = 1000,
   stf = ((b*t-a*t)/lineNum)/t,
   arr = [1,2,2.5,5,10],
   c   = 1,
   v;
//    分割线的基数是 [1,2,2.5,5,10] 这个步骤是查找 间隔 属于哪个范围
  if(stf<arr[0]){
   while( stf<arr[0] ){
    c = c*10;
    arr[0]=arr[0]/c; 
   }
   each([1,2,2.5,5,10],function(i,o){
    arr[i]= o/c;
   });
  }else if(stf>arr[4]){
   while( stf>arr[4] ){
    c = c*10;
    arr[4] = arr[4]*c;
   }
   each([1,2,2.5,5,10],function(i,o){
   arr[i]= o*c;
   });
  }
 
//上面找到间隔后 找到间隔中最接近的一个 
  each(arr,function(i,o){
   if(stf<=o){
    v = o;
    return false;
   }
  });
  var bj  = (mathAbs(a)*t)/(v*t),
   ba  = 0,
   isZ = bj!==parseInt(bj);
  isZ
   &&a>0
    "opacity"
     "alpha(opacity="+ hash[key] * 100+")"
     : this[0].style[key] = hash[key];
   }
   return this;
  },
  on: function(eventName, handler){
   var self = this;
   /*this.element.addEventListener(eventName,function(){
    handler.call(self)
   },false);*/
   this.element['on' + eventName] = function(e){
    e = e || win.event;
    handler.call(self,e);
   }   
   return this;
  },
  appendTo: function(parent){
   if(parent){
    parent.element
     ".vml", "behavior:url(#default#VML);display:inline-block;position:absolute;left:0px;top:0px");
  !doc.namespaces.vml && !+"\v1";
  doc.namespaces.add("vml", "urn:schemas-microsoft-com:vml");  
  
//-------------修改一些方法-----------------
  extend(vector.prototype,{
   $c : function(graphic,nodeName){
    var name = nodeName || 'shape'; 
    this.element= this[0] = (name === 'div' || name === 'span')
     "vml">'); 
    this.graphic = graphic;
    return this;  
   },
   /*on : function(eventName, handler){
    var self = this;
    this.element.attachEvent("on" + eventName,function(){
     handler.call(self);
    });
    return this;
   },*/
   addText : function(txt){
    this[0].innerHTML = txt || '';
    return this;
   },
   setSize : function(v){
    this[0].strokeWeight = v;
    return this;
   },   
   setOpacity : function(v){
    this.opacity.opacity=v;
    return this;
   }  
  });
 }
//---------------------------------------------------------------------------------------------------
//画图类
//------------------------------------------------------------
 win.smipleChart = function(){
  this.init.apply(this,arguments);
 };
 smipleChart.list      = [];
 smipleChart.timer     = null;
 smipleChart.lazyLoad  = function(id){
  id  = id || '0'
  smipleChart.list[id]
   &&smipleChart.list[id].loadMe();
 };
 smipleChart.prototype = {
  options : {
   charts : {
    paddingRight : 20,
    radius : 200,
    style  : {
     fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif',
     fontSize   : '12px',
     background : '#FFFFFF'
    }
   },
   title : {
    text  : '',
    y     : 10,
    style : {
     fontFamily:'Verdana,Arial,Helvetica,sans-serif',
     fontSize:'16px',
     fontWeight:'bold'
    }
   },
   subTitle : {
    text : '',
    y  : 30,
    style   : {
     fontFamily:'Verdana,Arial,Helvetica,sans-serif',
     fontSize:'12px',     
     color: '#111'   
    }
   },
   yUnit : {
    text  : '',
    style : {
     fontFamily:'Verdana,Arial,Helvetica,sans-serif',
     fontSize:'12px',      
     color: '#111'
    },
    lineNum :10
   }
  },
  init : function(container,options){
   clearTimeout(smipleChart.timer)
   var self      = this;
   this.width    = container.offsetWidth;
   this.height   = container.offsetHeight;
   this.currList = {};
   this.uuuid    = ++uuuid;
   this.timer    = null;
   //主要画图组的集合 形式
   //{id : {dom:xx,show:true}}
   this.mainGroup = {};
   //分段的时候要用到的  知道哪些是隐藏了的  因为要涉及到重绘
   this.hideList  = {};
   
   //svg 里面画图 必须有一个svg标签 vml就用div了
   this.container = hasSVG
    "L");
      //如果前面一个是null 并且不是第一个  把那个L去掉
      if(i > 0 && data[i - 1] == null)
       path.pop();
      //计算出 点的x,y的位置 
      var x = draw.startX + draw.offset + (i * draw.xPices),
       y = draw.startY - data[i] * (draw.yPices / draw.feed);
      if(isIE){
       x = parseInt(x);
       y = parseInt(y);
      }
      path.push(x);
      path.push(y);
      //画点
      var dotType = o.dotType||'circle';
      self.baseDraw[dotType](self,{
       x : x,     
       y : y,
       r : 4,
       fillColor : o.color
      })
      .attr({data:data[i],pos:x+'-'+(y-5)})
      .css({zIndex:10,cursor:'pointer'})
      .on('mouseover',(function(o,x,y){
       return function(){
        if(self.currList.dot){
         if(self.currList.dot[0] === this[0])
          return;
         self.currList.dot.setSize(0);
         self.currList.line.setSize(1.5);
        }
        this.setSize(2);
        line.setSize(2.5);
        var pos = this.attr('pos').split('-');
        self.showTooltip(o,pos[0],pos[1],this.attr('data'));
        self.currList.dot  = this;
        self.currList.line = line;
       }                  
      })(o,x,y))
      /*.on('mouseout',function(){    
       this.setSize(0);
       line.setSize(1.5);
      })*/
      .on('click',function(){lineGroup.toFront(); })
      .appendTo(lineGroup);
     }
    };
    //画折线
    line = self.baseDraw.path(self,{
     border      : 1.5,
     borderColor : o.color,
     isfill      : false,
     path        : path
    })
    .css({zIndex:5})
    /*.on('mouseover',function(){
     this.setSize(2.5);
    })
    .on('mouseout',function(){          
     this.setSize(1.5);
    })*/
    .on('click',function(){lineGroup.toFront();})
    .appendTo(lineGroup);
   });
   return this;
  },
  drawArea  : function(){
   var self = this,
    opts = this.opts,
    draw = opts.draw;
   each(opts.chartData,function(i,o){
    var id = 'chart' + i,
     areaGroup = self.group(id).appendTo();
    self.mainGroup[id] = {chart : areaGroup,show : true};
    //有2个路径 一个是区域的路径 一个是线的路径
    var areaPath = [M, (draw.startX + draw.offset).toFixed(0), (draw.startY-draw.jianjuY).toFixed(0)],
     path     = [M],
     data     = o.data,
     line;
    for(var n=0,l = data.length;n<l;n++){
     //如果数据是空的
     var len = areaPath.length;
     if( data[n] === null){
      //如果前面的一个不是m 就重新画 所以加上 M
      if(path[path.length - 1] !== M)
       path.push(M);
      
      //如果第1个 或者前面的都为null 修改起点坐标
      len===3
       &&(areaPath[1] = (draw.startX +(n+1)*draw.xPices + draw.offset).toFixed(0));
      
      //如果前面一个不是结束标识符  区域图结束 如果第一个数据是null 则不进行下面的操作
      if(areaPath[len - 1] !== seal&&n!==0){
       areaPath=areaPath.concat([
        areaPath[len - 2],
        (draw.startY-draw.jianjuY).toFixed(0),
        seal
       ]);
      }
     }else{
       n !== 0 && path.push(L);
       areaPath.push(L);
       //如果前面的那个数据是null 把之前的那个L去掉
       if(n > 0 && data[n - 1] == null){
        path.pop();
        //如果是第一个为null 不删除L
        n!==1&&areaPath.pop();
       }
        
       var x = draw.startX + draw.offset + (n * draw.xPices),
        y = draw.startY - data[n] * (draw.yPices / draw.feed);
       if(isIE){
        x = parseInt(x);
        y = parseInt(y);
       }        
       path.push(x);
       path.push(y);
       
       if(areaPath[len - 1] === seal){
        areaPath = areaPath.concat([
         M,
         x,
         parseInt(draw.startY-draw.jianjuY),
         L,
         x,
         y         
        ]);
       }else{
        areaPath.push(x);
        areaPath.push(y);
       }
       
       //如果是最后一个点
       if(n === l - 1){ 
        areaPath.push(x);
        areaPath.push(parseInt(draw.startY-draw.jianjuY));
       }
       //画点
       self.baseDraw[o.dotType || 'circle'](self,{
        x : x,     
        y : y,
        r : 4,
        fillColor : o.color
       })
       .attr({data:data[n],pos:x+'-'+(y-5)})
       .on('mouseover',(function(o,x,y){
        return function(){
         if(self.currList.dot){
          if(self.currList.dot[0] === this[0])
           return;
          self.currList.dot.setSize(0);
          self.currList.line.setSize(1.5);
         }
         this.setSize(2);
         line.setSize(2.5);
         var pos = this.attr('pos').split('-');
         self.showTooltip(o,pos[0],pos[1],this.attr('data'));
         self.currList.dot  = this;
         self.currList.line = line;
        }            
       
       })(o,x,y))
       /*.on('mouseout',function(){
        this.setSize(0);
        line.setSize(1.5);
        //self.hideTooltip()
       })*/
       .on('click',function(){areaGroup.toFront(); }) 
       .css({zIndex:10,cursor:'pointer'})
       .appendTo(areaGroup);
       
     }
    }
    areaPath.push(seal)
    self.baseDraw.path(self,{
     border      : 0,
     isfill      : true,
     fillColor   : o.color,
     opacity     : 0.5,
     path        : areaPath
    })
    .css({zIndex:5})
    .appendTo(areaGroup);
    
    line = self.baseDraw.path(self,{
     border      : 1.5,
     borderColor : o.color,
     isfill      : false,
     path        : path
    })
    /*.on('mouseover',function(){
     hasSVG
      "2px,2px,2px,2px" })
     .css({zIndex:200})
   },
   span : function(o,config){
    return o.createElement('span').
     css({
      position:'absolute',
      left : config.x+'px',
      top  : config.y+'px'
     })
   },
   path : function(o,config){   
    var attr   = {},
     width  = o.width,
     height = o.height,
     css    = {
       width    : width+'px',
       height   : height+'px'
     };
    
    if(config.border===0){
     attr.Stroked = 'f';
     attr.strokeWeight =0;
    }else{
     attr.strokeWeight = config.border||1 ;
    }
    attr.strokeColor  = config.borderColor || "#C0C0C0";
    attr.filled       = config.isfill"#C0C0C0");
    attr.coordsize    = width+','+height;
    attr.path         = config.path;
    var elem = o.createElement()
     .attr(attr)
     .css(css);
    if(config.opacity){
     var fill =  o.createElement('fill')
      .attr({
       type     : 'fill',
       color    : config.fillColor||"#C0C0C0",
       opacity  : config.opacity
      })
      .appendTo(elem);
     //那这个对象的一个属性引用设置透明的元素 以后会用到
     elem.opacity = fill[0];
    }      
    return elem;
     
   },
   circle : function(o,config){
    var width  = o.width,
     height = o.height,
     attr   = {
      strokeWeight : 1,
      coordsize    : width+','+height,
      filled   : 't'
     },
     css  ={
       width    : width+'px',
       height   : height+'px'
     }
     x = config.x,
     y = config.y,
     r = config.r;
    attr.strokeColor=attr.fillcolor = config.fillColor
    
    attr.path =[
     'wa', // clockwisearcto
     x - r, // left
     y - r, // top
     x + r, // right
     y + r, // bottom
     x + r, // start x
     y,     // start y
     x + r, // end x
     y,     // end y
     'e' // close        
    ];
    return o.createElement()
     .attr(attr)
     .css(css) 
   },
   pie   : function(o,config){
    ////config,s,e,r,index
    
    var opts  = o.opts,
     area  = opts.area,
     r     = config.r,
     rx    = area.centerX,
     ry    = area.centerY,
     innerR= config.innerR||0,
     sDot  = angle(r,[rx,ry],s,2),
     eDot  = angle(r,[rx,ry],e,2),
     color = config.config.color,
     s     = config.s,
     e     = config.e,
     e     = e - s == 2 * Math.PI "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font
     fontSize: '12px'
    }
   },
   title : {
    text : '线性图表' ,
    y  : 10,
    style : {
     color: 'black',
     fontSize: '16px'
    }
   },
   subTitle : {
    text : '线性图表副标题',
    y  : 35,
    style: {
     color: '#111',
     fontSize: '12px'
    }
   },
   legend : {
    enable : true,
    //type : 'lateral', // lateral 横向 或 lengthwise 纵向
    type : 'lateral',
    pos  : [10,10],
    style:{
     fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font
     fontSize   : '12px',
     magin      : '0px'
    }
   },
   yUnit : {
    text  : '线性图表侧标题',
    x     : 20,
    style : {
     color    : '#111',
     fontSize : '12px'
    }
   },
   xUnit : {
    units: [
     '一月',
     '二月',
     '三月',
     '四月',
     '五月',
     '六月',
     '七月',
     '八月',
     '九月',
     '十月',
     '十一月',
     '十二月'
    ] 
   },
   chartData : [
   {
    name    : 'xcv',
    color   : '#4572A7',
    dotType : 'square',
    //data    : [11,12,13,15,16,18,17,14,10]
    //[1,2,3,5,6,8,7,4,10]
    data: [44,-12,-78,100,-13,-4,-26,34]
   }, {
 
    name: 'frfr',
    color: '#AA4643',
    dotType : 'triangle',    
    data: [-44,12,78,-100,13,4,-56,-34]
   }, {
    name: 'AAAAA',
    color: '#89A54E',
    dotType : 'diamond',
    data: [null,78,83,null,22,-78,2,44,78]
   }, {
    name: 'BBBB',
    color: '#80699B',
    data: [null, 58, 35, null, 52, 47, 26, -55, 39, 123,15,66]
   }
   ]
  };
  new smipleChart($$('line'),config);
  config.charts.type ='area';
  config.title.text ='区域图表'
  config.subTitle.text='区域图表副标题'
  config.yUnit.text ='区域图表侧标题'
  config.chartData = [
   {
    name    : 'xcv',
    color   : '#4572A7',
    //data    : [0,3,4,5,6,7,8,9,10,11]
    data    : [11,12,13,14,15,16,-17,18,19,0]
   }, {
 
    name: 'frfr',
    color: '#AA4643',   
    data: [44,12,78,100,13,44,56,34]
   }, {
    name: 'AAAAA',
    color: '#89A54E',
    data: [null,101,83,null,22,78,88,44,78]
   }, {
    name: 'BBBB',
    color: '#80699B',
    data: [null, 58, 35, null, 52, 47, 26, 55, 39, 123,15,66]
   }
   ]
  
  new smipleChart($$('area'),config);
  config.title.text ='柱状图表'
  config.subTitle.text='柱状图表副标题'
  config.yUnit.text ='柱状图表侧标题'  
  config.charts.type ='columns';
  config.chartData =[
   {
    name  : 'xcv',
    color : '#4572A7',
    //data  : [2,3,4,5,6,7,8,9,10,11]
    data  : [-0.01,-0.62,0,0.55,null,0.78,-0.63,-0.82,null,null,0.33]
   }, {
    name: 'frfr',
    color: '#AA4643',
    data: [-0.22,0.82,0.55,1.32,0.33,0.95,null,1,0.65,null,0.78]
   }, {
    name: 'AAAAA',
    color: '#89A54E',
    data: [null,0.62,0.34,null,0.63,0,-0.23,-1,0.62,0.45,null,-0.56]
   }
   ]
  
  new smipleChart($$('zhu'),config);
  config.charts.panel='y'
  new smipleChart($$('zhu1'),config);
  config.charts.type ='pie';
  config.title.text ='饼图图表'
  config.subTitle.text='饼图图表副标题'
  config.yUnit.text =''
  config.legend.type='lengthwise';
  config.chartData =[
   {
    name  : 'aaa',
    color : '#4572A7',
    data  : [433,123,null,66]
   }, {
    name: 'bbb',
    color: '#AA4643',
    data: [45,33,33,411]
   }, {
    name: 'ccc',
    color: '#89A54E',
    data: [55,null,75,233]
   }, {
    name: 'ddd',
    color: '#80699B',
    data: [63,null,100,333]
   }
   ] 
  config.legend.pos= [680,30]
  new smipleChart($$('pie'),config);
  config.charts.type ='pies';
  config.title.text ='多层饼图图表'
  config.subTitle.text='多层饼图图表副标题' 
   config.legend.type='lateral';
  config.legend.pos= [290,400]  
  new smipleChart($$('pies'),config);  
  config.chartData =[
   {
    name  : 'xcv',
    color : '#4572A7',
    data  : [111,222,333,null,444,555,56,57,84]
   }, {
    name: 'frfr',
    color: '#AA4643',
    data: [845,666,100,null,666,677,56,88,633,55,555]
   }, {
    name: 'AAAAA',
    color: '#89A54E',
    data: [555,162,75,null,364,0,637,112,163,615]
   }
   ]
  
  config.charts.type ='line';
  config.legend.pos= [10,10]
  //
  config.yUnit.lineNum = 10;
  config.charts.panel = 'x';
  config.title.text ='分段图表'
  config.subTitle.text='分段图表副标题'
  config.yUnit.text ='分段图表侧标题'  
  config.charts.type ='segment';
  new smipleChart($$('segmentx'),config);
  config.charts.panel = 'y';
  new smipleChart($$('segmenty'),config);
  config.yUnit.lineNum = 2;
  config.title.text ='比较小的'
  config.subTitle.text='只设置了2条线'
  config.yUnit.text ='小测标题' ; 
  new smipleChart($$('vv'),config);
  //alert(new Date().getTime()-t)
 }
</script>
</body>
</html>

js浮点精度问题 不好解决 求助。。。。。。。。。

水平有限 难免问题多多 望赐教。。。。。。。

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com