知足常乐,享受生活
<!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>
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<STYLE>![](https://www.cnblogs.com/Images/dot.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
v\:* {
}{ BEHAVIOR: url(#default#VML) }
</STYLE>
<SCRIPT LANGUAGE="JavaScript" src="VMLGraph1_0_1.js"></SCRIPT>
</HEAD>
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<SCRIPT LANGUAGE="JavaScript">![](https://www.cnblogs.com/Images/dot.gif)
//------------------------------------------------------------
// Copyright (c) 2003-2004 LeadinSoft. All rights reserved.
// Version 1.0.1
// Ahthor dolphin
//------------------------------------------------------------
var bstSingle = 0; //Chart边框为单线
var bstDouble = 1; //Chart边框为双线
var fstSolid = 0; //Chart背景实心填充
var fstTexture = 1; //Chart背景材质填充
var fstRegular = "regular" //字体:正常
var fstItalic = "italic"; //字体:斜体
var fstBold = "bold"; //字体:粗体
var atLeft = "left"; //Chart标题左对齐
var atCenter = "center"; //Chart标题居中
var atRight = "right"; //Chart标题右对齐
![](/Images/OutliningIndicators/InBlock.gif)
//定义 VML Chart 基类
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function Graph()
{
this.Text = new Text();
this.Border = new Border();
this.Width = 500;
this.Height = 300;
this.Fill = new Fill();
this.Legend = new Legend();
this.SeriesCollection = [];
this.Container = null;
this.Shadow = false;
this.VMLObject = null;
};
![](/Images/OutliningIndicators/InBlock.gif)
//获取Graph类的一个引用
var _p = Graph.prototype;
//通过基类初始化Chart
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_p.initialise = function()
{
if(this.Container == null) return;
var o;
//画外框
var group = document.createElement("v:group");
group.style.width = this.Width+"pt";
group.style.height = this.Height+"pt";
group.coordsize = this.Width*10 +"," + this.Height*10;
group.id = "group1";
![](/Images/OutliningIndicators/InBlock.gif)
//添加一个背景层
var vRect = document.createElement("v:rect");
vRect.style.width = (this.Width*10-100) +"px";
vRect.style.height = this.Height*10+ "px";
vRect.coordsize = "21600,21600";
![](/Images/OutliningIndicators/InBlock.gif)
group.appendChild(vRect);
o = vRect;
//设置边框大小
vRect.strokeweight = this.Border.Width;
//设置边框颜色
vRect.strokecolor = this.Border.Color;
//设置背景
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(this.Fill.Style == fstSolid)
{
vRect.fillcolor = this.Fill.Color;
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
if(this.Fill.background != null)
vRect.style.backgroundImage = this.Fill.background;
else
vRect.fillcolor = this.Fill.Color;
}
//边框是否为双线
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(this.Border.Style == bstDouble)
{
var tmp = document.createElement("v:rect");
tmp.style.width = (this.Width*10-300) +"px";
tmp.style.height = (this.Height*10-200)+ "px";
tmp.style.top = "100px";
tmp.style.left = "100px";
tmp.strokecolor = this.Border.Color;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(this.Fill.Style == fstSolid)
{
tmp.fillcolor = this.Fill.Color;
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
if(this.Fill.background != null)
tmp.style.backgroundImage = this.Fill.background;
else
tmp.fillcolor = this.Fill.Color;
}
var filltmp = document.createElement("v:fill");
filltmp.type = "Frame";
tmp.appendChild(filltmp);
group.appendChild(tmp);
o = tmp;
}
![](/Images/OutliningIndicators/InBlock.gif)
//画标题
var vCaption = document.createElement("v:textbox");
vCaption.style.fontSize = this.Text.Font.Size +"px";
vCaption.style.color = this.Text.Font.Color;
vCaption.style.height = this.Text.Height +"px";
vCaption.style.fontWeight = this.Text.Font.Style;
vCaption.innerHTML = this.Text.Text;
vCaption.style.textAlign = this.Text.Alignment;
![](/Images/OutliningIndicators/InBlock.gif)
o.appendChild(vCaption);
![](/Images/OutliningIndicators/InBlock.gif)
//画阴影
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(this.Shadow)
{
var vShadow = document.createElement("v:shadow");
vShadow.on = "t";
vShadow.type = "single";
vShadow.color = "graytext";
vShadow.offset = "4px,4px";
vRect.appendChild(vShadow);
}
this.VMLObject = group;
this.Container.appendChild(group);
};
![](/Images/OutliningIndicators/InBlock.gif)
//画具体图形
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_p.draw = function()
{
alert("基类不能够实例化具体数据");
};
![](/Images/OutliningIndicators/InBlock.gif)
//增加序列
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_p.addSeries = function(o)
{
var iCount = this.SeriesCollection.length;
if(o.Title == null)
o.Title = "Series"+ iCount;
this.SeriesCollection[iCount] = o;
};
![](/Images/OutliningIndicators/InBlock.gif)
//求数据对象的最大Value
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_p.maxs = function()
{
var max = 0;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0; i<this.SeriesCollection.length; i++)
{
if(max<this.SeriesCollection[i].max()) max = this.SeriesCollection[i].max();
}
return max;
}
![](/Images/OutliningIndicators/InBlock.gif)
//重载Object的toString方法
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_p.toString = function()
{
return "oGraph";
};
![](/Images/OutliningIndicators/InBlock.gif)
//定义 VML Chart 边框类
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function Border()
{
this.Color = "Black";
this.Style = bstSingle;
this.Width = 1;
};
![](/Images/OutliningIndicators/InBlock.gif)
//定义 VML Chart 背景类
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function Fill()
{
this.Color = "White";
this.background = null;
this.Style = fstSolid;
};
![](/Images/OutliningIndicators/InBlock.gif)
//定义 VML Chart 标题类
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function Text()
{
this.Alignment = atCenter;
this.Height = 24;
this.Font = new Font();
this.Text = "VML Chart Version 1.0";
};
![](/Images/OutliningIndicators/InBlock.gif)
//定义 VML Chart 字体类
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function Font()
{
this.Color = "Black";
this.Family = "Arial";
this.Size = 12;
this.Style = fstRegular;
};
![](/Images/OutliningIndicators/InBlock.gif)
//定义 VML Chart 图例类
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function Legend()
{
this.Font = new Font();
};
![](/Images/OutliningIndicators/InBlock.gif)
//定义 VML Chart 序列类
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function Series()
{
this.Color = Series.getColor();
this.Title = null;
this.all = [];
};
//随机获取一种颜色
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Series.getColor = function()
{
return "rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")";
};
var _p = Series.prototype;
//增加具体数据
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_p.addData = function(sName,sValue,sHref,sTooltipText)
{
var oData = new Object();
oData.Name = sName;
oData.Value = sValue;
oData.Href = sHref;
if(sTooltipText == null || sTooltipText == "undefined")
oData.TooltipText="本项数值为:"+ sValue;
else
oData.TooltipText = sTooltipText;
var iCount=this.all.length;
this.all[iCount] = oData;
};
![](/Images/OutliningIndicators/InBlock.gif)
//求数据对象的最大Value
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_p.max = function()
{
var max = 0;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0; i<this.all.length; i++)
{
if(this.all[i].Value > max) max = this.all[i].Value;
}
return max;
}
![](/Images/OutliningIndicators/InBlock.gif)
//重载Object的toString方法
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_p.toString = function()
{
return "oSeries";
};
![](/Images/OutliningIndicators/InBlock.gif)
//定义 VML Chart 时间序列类
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function TimeSeries()
{
Series.call(this);
};
var _p = TimeSeries.prototype = new Series;
//增加具体数据
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_p.addData = function(sTime,sValue,sType,sHref,sTooltipText)
{
var oData = new Object();
var dt = new Date(eval(sTime*1000));
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(sType == "Minute")
{
oData.Name = dt.getHours() +":"+ dt.getMinutes();
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else if(sType == "Hour")
{
oData.Name = dt.getHours();
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else if(sType == "Day")
{
oData.Name = eval(dt.getMonth()+1) +"月"+ dt.getDate() +"日";
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else if(sType == "Month")
{
oData.Name = dt.getYear() +"年"+ eval(dt.getMonth()+1)+ "月";
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
oData.Name = dt.getYear() +"年"
}
oData.Value = sValue;
oData.Href = sHref;
oData.TooltipText = "本项数值为:"+ sValue + ", 时间:"+ dt.getYear() +"年"+ eval(dt.getMonth()+1)+ "月"+ dt.getDate() +"日 "+ dt.getHours() +":"+ dt.getMinutes() +":"+ dt.getSeconds();
var iCount=this.all.length;
this.all[iCount] = oData;
};
![](/Images/OutliningIndicators/InBlock.gif)
//重载Object的toString方法
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_p.toString = function()
{
return "oTimeSeries";
};
![](/Images/OutliningIndicators/InBlock.gif)
//定义 VML Chart 坐标轴类
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function Axis()
{
this.Color = "Black";
this.Ln = 0;
this.NumberFormat = 0;
this.Prefix = null;
this.suffix = null;
this.Spacing= 30;
this.Width = 0;
this.showPoint = 12;
};
![](/Images/OutliningIndicators/InBlock.gif)
//VerticalChart类,继承Graph
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function VerticalChart()
{
Graph.call(this);
this.Margin = new Array(300,100,300,200);
this.AxisX = new Axis();
this.AxisY = new Axis();
};
var _p = VerticalChart.prototype = new Graph;
//画坐标系
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_p.drawCoord = function(oContainer)
{
this.AxisY.Ln = eval(this.Height*10 - this.Margin[3]) - this.Margin[1] - 400;
var vLine = document.createElement("v:line");
vLine.id = "idCoordY";
vLine.from = this.Margin[0] +","+ this.Margin[1];
vLine.to = this.Margin[0] +","+ eval(this.Height*10 - this.Margin[3]);
vLine.style.zIndex = 8;
vLine.style.position = "absolute";
vLine.strokecolor = this.AxisY.Color;
vLine.strokeweight = 1;
![](/Images/OutliningIndicators/InBlock.gif)
var vStroke = document.createElement("v:stroke");
vStroke.StartArrow = "classic";
![](/Images/OutliningIndicators/InBlock.gif)
vLine.appendChild(vStroke);
oContainer.appendChild(vLine);
![](/Images/OutliningIndicators/InBlock.gif)
this.AxisX.Ln = eval(this.Width*10 - this.Margin[0]) - this.Margin[2] - 300;
var vLine = document.createElement("v:line");
vLine.id = "idCoordX";
vLine.from = this.Margin[0] +","+ eval(this.Height*10 - this.Margin[3]);
vLine.to = eval(this.Width*10 - this.Margin[2]) +","+ eval(this.Height*10 - this.Margin[3]);
vLine.style.zIndex = 8;
vLine.style.position = "absolute";
vLine.strokecolor = this.AxisX.Color
vLine.strokeweight = 1;
![](/Images/OutliningIndicators/InBlock.gif)
var vStroke = document.createElement("v:stroke");
vStroke.EndArrow = "classic";
![](/Images/OutliningIndicators/InBlock.gif)
vLine.appendChild(vStroke);
oContainer.appendChild(vLine);
};
![](/Images/OutliningIndicators/InBlock.gif)
//画X轴刻度
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_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;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(totalPoint > showPoint)
{
if(totalPoint < showPoint*2)
showPoint = Math.round(3*showPoint/5);
Step = Math.round(totalPoint/showPoint);
}
else showPoint = totalPoint;
![](/Images/OutliningIndicators/InBlock.gif)
this.AxisX.showPoint = showPoint;
var newLine, newStroke, newShape, newText;
var px,ln;
var y = eval(this.Height*10 - this.Margin[3]);
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=1; i<=showPoint; i++)
{
ln = i*Step;
if(ln>totalPoint) break;
newLine = document.createElement("v:line");
px = this.Margin[0] + (i-1)*fColWidth * Step;
newLine.from = px +","+ y;
newLine.to = px +","+ eval(y + this.AxisX.Spacing);
newLine.style.zIndex = 8;
newLine.style.position = "absolute";
![](/Images/OutliningIndicators/InBlock.gif)
newStroke = document.createElement("<v:stroke color='"+ this.AxisX.Color +"'>");
newLine.appendChild(newStroke);
![](/Images/OutliningIndicators/InBlock.gif)
oContainer.appendChild(newLine);
![](/Images/OutliningIndicators/InBlock.gif)
newShape= document.createElement("<v:shape style='position:absolute;left:"+ eval(px-80) +";top:"+ eval(y+this.AxisX.Spacing) +";WIDTH:200px;HEIGHT:150px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>");
![](/Images/OutliningIndicators/InBlock.gif)
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);
![](/Images/OutliningIndicators/InBlock.gif)
oContainer.appendChild(newShape);
}
};
![](/Images/OutliningIndicators/InBlock.gif)
//画Y轴刻度
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_p.drawLineY = function(oContainer)
{
var maxData = this.maxs();
maxData += (4 - maxData % 4)
var showPoint = this.AxisY.showPoint;
var dcs = 1;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=showPoint; i>0; i--)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(maxData % i == 0)
{
dcs = i;
this.AxisY.showPoint = i;
break;
}
}
var newLine, newStroke, newShape, newText;
var py;
var x = this.Margin[0];
var fRowHeight = Math.floor(this.AxisY.Ln/dcs);
this.AxisY.Width = maxData; //Y轴时存放最大值
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0; i<=dcs; i++)
{
py = eval(this.Height*10 - this.Margin[3]) - i*fRowHeight;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(i!=0)
{
newLine = document.createElement("v:line");
newLine.from = eval(x-this.AxisY.Spacing) +","+ py;
newLine.to = x +","+ py;
newLine.style.zIndex = 8;
newLine.style.position = "absolute";
![](/Images/OutliningIndicators/InBlock.gif)
newStroke = document.createElement("<v:stroke color='"+ this.AxisY.Color +"'>");
newLine.appendChild(newStroke);
![](/Images/OutliningIndicators/InBlock.gif)
oContainer.appendChild(newLine);
}
![](/Images/OutliningIndicators/InBlock.gif)
newShape= document.createElement("<v:shape style='position:absolute;left:"+ eval(x-200) +";top:"+ eval(py-50) +";WIDTH:200px;HEIGHT:150px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>");
![](/Images/OutliningIndicators/InBlock.gif)
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 = i*(maxData/dcs);
newShape.appendChild(newText);
![](/Images/OutliningIndicators/InBlock.gif)
oContainer.appendChild(newShape);
}
};
![](/Images/OutliningIndicators/InBlock.gif)
//画图例
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_p.drawSmallSeries=function(oContainer)
{
var arrSeries = this.SeriesCollection;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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);
![](/Images/OutliningIndicators/InBlock.gif)
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>");
![](/Images/OutliningIndicators/InBlock.gif)
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>");
![](/Images/OutliningIndicators/InBlock.gif)
newText.innerHTML = " "+ arrSeries[i].Title;
![](/Images/OutliningIndicators/InBlock.gif)
newShape.appendChild(newText);
oContainer.appendChild(newShape);
}
};
//------------------------------------------------------------------------------
//竖向柱状图类,继承VerticalChart类
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function VerticalBarChart()
{
VerticalChart.call(this);
};
var _p = VerticalBarChart.prototype = new VerticalChart;
![](/Images/OutliningIndicators/InBlock.gif)
//重花X轴刻度
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_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;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(totalPoint > showPoint)
{
if(totalPoint < showPoint*2)
showPoint = Math.round(3*showPoint/5);
Step = Math.round(totalPoint/showPoint);
}
else showPoint = totalPoint;
![](/Images/OutliningIndicators/InBlock.gif)
this.AxisX.showPoint = showPoint;
var newLine, newStroke, newShape, newText;
var px,ln;
var y = eval(this.Height*10 - this.Margin[3]);
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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";
![](/Images/OutliningIndicators/InBlock.gif)
newStroke = document.createElement("<v:stroke color='"+ this.AxisY.Color +"'>");
newLine.appendChild(newStroke);
![](/Images/OutliningIndicators/InBlock.gif)
oContainer.appendChild(newLine);
![](/Images/OutliningIndicators/InBlock.gif)
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>");
![](/Images/OutliningIndicators/InBlock.gif)
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>");
![](/Images/OutliningIndicators/InBlock.gif)
newText.innerHTML = this.SeriesCollection[0].all[ln-1].Name;
newShape.appendChild(newText);
![](/Images/OutliningIndicators/InBlock.gif)
oContainer.appendChild(newShape);
}
};
![](/Images/OutliningIndicators/InBlock.gif)
//画VerticalBarChart
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_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);
};
![](/Images/OutliningIndicators/InBlock.gif)
//画VerticalBarChart的具体数据
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_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;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0; i<iSeriesLn; i++)
{
iValueLn = arrSeries[i].all.length;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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);
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>");
![](/Images/OutliningIndicators/InBlock.gif)
//alert(this.AxisX.Width)
oContainer.appendChild(newShape);
}
}
};
//-----------------------------------------------------------------------------
//------------------------------------------------------------------------------
//竖向线状图类,继承VerticalChart类
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function VerticalLineChart()
{
VerticalChart.call(this);
this.isDrawPoint = true;
};
var _p = VerticalLineChart.prototype = new VerticalChart;
![](/Images/OutliningIndicators/InBlock.gif)
//画VerticalLineChart
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_p.draw = function()
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(this.Border.Style == 1)
{
this.Margin = new Array(400,200,400,300);
}
![](/Images/OutliningIndicators/InBlock.gif)
var oContainer = this.VMLObject;
this.AxisY.showPoint = 10;
this.drawCoord(oContainer);
this.drawLineX(oContainer);
this.drawLineY(oContainer);
this.drawSmallSeries(oContainer);
this.drawLine(oContainer);
};
![](/Images/OutliningIndicators/InBlock.gif)
//画VerticalLineChart的具体数据
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
_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;
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0; i<iSeriesLn; i++)
{
iValueLn = arrSeries[i].all.length;
points[i] = new Array();
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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";
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var k=0; k<points[i].length; k++)
{
if(k==0) newPolyLine.points = points[i][k];
else newPolyLine.points += " "+ points[i][k];
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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);
}
};
//-----------------------------------------------------------------------------
</SCRIPT>
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
<BODY>
<div id=test1>
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<SCRIPT LANGUAGE="JavaScript">![](https://www.cnblogs.com/Images/dot.gif)
<!--
var tmp = new Array();
![](/Images/OutliningIndicators/InBlock.gif)
//柱状图
//var chart = new VerticalBarChart();
![](/Images/OutliningIndicators/InBlock.gif)
//线图
var chart = new VerticalLineChart();
![](/Images/OutliningIndicators/InBlock.gif)
chart.Text.Font.Size = 24;
chart.Text.Font.Style = fstBold;
chart.Shadow = true;
chart.Container = test1;
chart.initialise();
![](/Images/OutliningIndicators/InBlock.gif)
var s = new Series();
var label = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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);
![](/Images/OutliningIndicators/InBlock.gif)
s = new Series();
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(var i=0;i<label.length;i++)
{
v = Math.round(Math.random()*1000);
s.addData(label[i],v);
}
s.Title = "Series 2";
s.Color = "green";
chart.addSeries(s);
![](/Images/OutliningIndicators/InBlock.gif)
chart.draw();
![](/Images/OutliningIndicators/InBlock.gif)
//-->
</SCRIPT>
</div>
</BODY>
</HTML>
![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)