newshape= document.createelement("<v:rect style='position:absolute;left:"+l+";top:"+t+";width:"+ barwidth + "px;height:"+ barheight +"px;z-index:9;border-width:0' fillcolor='" + arrseries[i].color + "' title = '"+ arrseries[i].all[k].tooltiptext +"'></v:rect>");
//alert(this.axisx.width)
ocontainer.appendchild(newshape);
}
}
};
//-----------------------------------------------------------------------------
//------------------------------------------------------------------------------
//竖向线状图类，继承verticalchart类
function verticallinechart(){
verticalchart.call(this);
this.isdrawpoint = true;
};
var _p = verticallinechart.prototype = new verticalchart;
//画verticallinechart
_p.draw = function(){
if(this.border.style == 1){
this.margin = new array(400,200,400,300);
}
var ocontainer = this.vmlobject;
this.axisy.showpoint = 10;
this.drawcoord(ocontainer);
this.drawlinex(ocontainer);
this.drawliney(ocontainer);
this.drawsmallseries(ocontainer);
this.drawline(ocontainer);
};
//画verticallinechart的具体数据
_p.drawline = 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 points = new array(iseriesln);
var l,t,barheight;
for(var i=0; i<iseriesln; i++){
ivalueln = arrseries[i].all.length;
points[i] = new array();
for(var k=0; k<ivalueln; k++){
barheight = dcs*eval(arrseries[i].all[k].value)
l = eval(this.margin[0]+ k*fcolwidth);
t = eval(this.height*10 - this.margin[3] - barheight);
points[i][k] = l+","+t;
}
}
//画polyline
for(var i=0; i<points.length; i++){
var newpolyline = document.createelement("v:polyline");
newpolyline.filled = false;
newpolyline.style.zindex = 8;
newpolyline.style.position = "absolute";
newpolyline.strokecolor = arrseries[i].color;
newpolyline.strokeweight = "1.5pt";
for(var k=0; k<points[i].length; k++){
if(k==0) newpolyline.points = points[i][k];
else newpolyline.points += " "+ points[i][k];
if(this.isdrawpoint){
var newoval = document.createelement("v:oval");
tmp = points[i][k].split(",");
newoval.style.zindex = 9;
newoval.style.position = "absolute";
newoval.style.left = tmp[0]-20;
newoval.style.top = tmp[1]-20;
newoval.style.width = 40;
newoval.style.height = 40;
newoval.strokecolor = arrseries[i].color;
newoval.fillcolor = arrseries[i].color;
newoval.title = arrseries[i].all[k].tooltiptext;
ocontainer.appendchild(newoval);
}
}
ocontainer.appendchild(newpolyline);
}
};
//-----------------------------------------------------------------------------
file:vmlgraph1_0_1.htm
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title> test vml chart for version 1.0.1 </title>
<style>
v\:* { behavior: url(#default#vml) }
</style>
<script language="javascript" src="vmlgraph1_0_1.js"></script>
</head>
<body>
<div id=test1>
<script language="javascript">
<!--
var tmp = new array();
//柱状图
//var chart = new verticalbarchart();
//线图
var chart = new verticallinechart();
chart.text.font.size = 24;
chart.text.font.style = fstbold;
chart.shadow = true;
chart.container = test1;
chart.initialise();
var s = new series();
var label = new array("jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec");
for(var i=0;i<label.length;i++){
v = math.round(math.random()*1000);
tmp[tmp.length] = v;
s.adddata(label[i],v);
}
s.title = "series 1";
s.color = "red";
chart.addseries(s);
s = new series();
for(var i=0;i<label.length;i++){
v = math.round(math.random()*1000);
