VML Chart 控件[4]

[入库:2005年8月18日] [更新:2007年3月24日]

本文简介:选择自 lxx8402 的 blog

 var arrseries = this.seriescollection;
 for(var i=0; i<arrseries.length; i++){
  var newrect = document.createelement("v:rect");
  newrect.style.left = eval(this.width*10 - this.margin[2]*2) - 200;
  newrect.style.top  = this.margin[1] + 200 + i*120;
  newrect.style.height = "100px";
  newrect.style.width  = "100px";
  newrect.fillcolor = arrseries[i].color;
  newrect.strokeweight="1";
  newrect.strokecolor="white";
  newrect.style.zindex = 10;
  ocontainer.appendchild(newrect);

  var newshape= document.createelement("<v:shape style='position:absolute;left:"+ eval(this.width*10 - this.margin[2]*2 - 70) +";top:"+ eval(this.margin[1] + 200 + i*120) +";width:600px;height:100px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>");

  var newtext = document.createelement("<v:textbox inset='0pt,0pt,0pt,0pt' style='font-size:"+this.legend.font.size+"px;v-text-anchor:top-right-baseline;color:"+ this.legend.font.color +";cursor:default' title='"+ arrseries[i].title +"'></v:textbox>");

  newtext.innerhtml = " "+ arrseries[i].title;

  newshape.appendchild(newtext);
  ocontainer.appendchild(newshape);
 }
};
//------------------------------------------------------------------------------
//竖向柱状图类,继承verticalchart类
function verticalbarchart(){
 verticalchart.call(this);
};
var _p = verticalbarchart.prototype = new verticalchart;

//重花x轴刻度
_p.drawlinex = function(ocontainer){
 var totalpoint = this.seriescollection[0].all.length;
 var icol  = totalpoint + 1;
 var fcolwidth = math.floor(this.axisx.ln/icol);
 this.axisx.width= fcolwidth;
 var showpoint = this.axisx.showpoint,step = 1;
 if(totalpoint > showpoint) {
  if(totalpoint < showpoint*2)
   showpoint = math.round(3*showpoint/5);
  step = math.round(totalpoint/showpoint);
 }
 else showpoint = totalpoint;

 this.axisx.showpoint = showpoint;
 
 var newline, newstroke, newshape, newtext;
 var px,ln;
 var y = eval(this.height*10 - this.margin[3]);

 for(var i=1; i<=showpoint; i++){
  ln = i*step;
  if(ln>totalpoint) break;
  newline   = document.createelement("v:line");
  px    = this.margin[0] + i*fcolwidth * step;
  newline.from = px +","+ y;
  newline.to  = px +","+ eval(y + this.axisx.spacing);
  newline.style.zindex = 8;
  newline.style.position = "absolute";

  newstroke = document.createelement("<v:stroke color='"+ this.axisy.color +"'>");
  newline.appendchild(newstroke);

  ocontainer.appendchild(newline);

  newshape= document.createelement("<v:shape style='position:absolute;left:"+ eval((px-fcolwidth/2)-50) +";top:"+ eval(y+this.axisx.spacing) +";width:200px;height:150px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>");

  newtext = document.createelement("<v:textbox inset='0pt,0pt,0pt,0pt' style='font-size:12px;v-text-anchor:top-right-baseline;color:"+ this.axisy.color +"'></v:textbox>");

  newtext.innerhtml = this.seriescollection[0].all[ln-1].name;
  newshape.appendchild(newtext);

  ocontainer.appendchild(newshape);
 }
};

//画verticalbarchart
_p.draw = function(){
 var ocontainer = this.vmlobject;
 this.axisy.showpoint = 10;
 this.drawcoord(ocontainer);
 this.drawlinex(ocontainer);
 this.drawliney(ocontainer);
 this.drawsmallseries(ocontainer);
 this.drawbar(ocontainer);
};

//画verticalbarchart的具体数据
_p.drawbar = function(ocontainer){
 var arrseries = this.seriescollection;
 var fcolwidth,dcs;
 fcolwidth = this.axisx.width;
 dcs    = this.axisy.ln/this.axisy.width;
 var ivalueln, iseriesln;
 iseriesln = arrseries.length
 var barwidth = fcolwidth/(iseriesln+1);
 var newshape = null;
 var l,t,barheight;
 for(var i=0; i<iseriesln; i++){
  ivalueln = arrseries[i].all.length;
  for(var k=0; k<ivalueln; k++){
   barheight = dcs*eval(arrseries[i].all[k].value)
   l = eval(this.margin[0]+ k*fcolwidth + i*barwidth + barwidth/2);
   t = eval(this.height*10 - this.margin[3] - barheight);

本文关键:jascript vml chart 图形 图表
 

本站最佳浏览方式为 分辨率 1024x768 IE 6.0(或更高版本的 IE浏览器)

go top