js图形报表
#region 声明
//----------------------------------------------------------------------
//
// 修改: 李淼（Nick.Lee）
//
// js图形报表
// 时间:2005-3-17
// boyorgril@msn.com
// QQ:16503096
//注意：引用请标明修改出处,谢谢
//----------------------------------------------------------------------
#endregion
html:
<!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);
s.addData(label[i],v);
}
s.Title = "Series 2";
s.Color = "green";
chart.addSeries(s);
s = new Series();
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 = "blue";
chart.addSeries(s);
chart.draw();
//-->
</SCRIPT>
</div>
</BODY>
</HTML>
js:
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标题右对齐
//定义 VML Chart 基类
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;
};
//获取Graph类的一个引用
var _p = Graph.prototype;
//通过基类初始化Chart
_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";
//添加一个背景层
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";
group.appendChild(vRect);
o = vRect;
//设置边框大小
vRect.strokeweight = this.Border.Width;
//设置边框颜色
vRect.strokecolor = this.Border.Color;
//设置背景
if(this.Fill.Style == fstSolid){
vRect.fillcolor = this.Fill.Color;
}
else{
if(this.Fill.background != null)
vRect.style.backgroundImage = this.Fill.background;
else
vRect.fillcolor = this.Fill.Color;
}
//边框是否为双线
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;
if(this.Fill.Style == fstSolid){
tmp.fillcolor = this.Fill.Color;
}
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;
}
//画标题
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;
o.appendChild(vCaption);
//画阴影
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);
};
//画具体图形
_p.draw = function(){
alert("基类不能够实例化具体数据");
};
//增加序列
_p.addSeries = function(o){
var iCount = this.SeriesCollection.length;
if(o.Title == null)
o.Title = "Series"+ iCount;
this.SeriesCollection[iCount] = o;
};
//求数据对象的最大Value
_p.maxs = function(){
var max = 0;
for(var i=0; i<this.SeriesCollection.length; i++){
if(max<this.SeriesCollection[i].max()) max = this.SeriesCollection[i].max();
}
return max;
}
//重载Object的toString方法
_p.toString = function(){
return "oGraph";
};
//定义 VML Chart 边框类
function Border(){
this.Color = "Black";
this.Style = bstSingle;
this.Width = 1;
};
//定义 VML Chart 背景类
function Fill(){
this.Color = "White";
this.background = null;
this.Style = fstSolid;
};
//定义 VML Chart 标题类
function Text(){
this.Alignment = atCenter;
this.Height = 24;
this.Font = new Font();
this.Text = "VML Chart Version 1.0";
};
//定义 VML Chart 字体类
function Font(){
this.Color = "Black";
this.Family = "Arial";
this.Size = 12;
this.Style = fstRegular;
};
//定义 VML Chart 图例类
function Legend(){
this.Font = new Font();
};
//定义 VML Chart 序列类
function Series(){
this.Color = Series.getColor();
this.Title = null;
this.all = [];
};
//随机获取一种颜色
Series.getColor = function(){
return
"rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")";
};
var _p = Series.prototype;
//增加具体数据
_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;
};
//求数据对象的最大Value
_p.max = function(){
var max = 0;
for(var i=0; i<this.all.length; i++){
if(this.all[i].Value > max) max = this.all[i].Value;
}
return max;
}
//重载Object的toString方法
_p.toString = function(){
return "oSeries";
};
//定义 VML Chart 时间序列类
function TimeSeries(){
Series.call(this);
};
var _p = TimeSeries.prototype = new Series;
//增加具体数据
_p.addData = function(sTime,sValue,sType,sHref,sTooltipText){
var oData = new Object();
var dt = new Date(eval(sTime*1000));
if(sType == "Minute"){
oData.Name = dt.getHours() +":"+ dt.getMinutes();
}
else if(sType == "Hour"){
oData.Name = dt.getHours();
}
else if(sType == "Day"){
oData.Name = eval(dt.getMonth()+1) +"月"+ dt.getDate() +"日";
}
else if(sType == "Month"){
oData.Name = dt.getYear() +"年"+ eval(dt.getMonth()+1)+ "月";
}
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;
};
//重载Object的toString方法
_p.toString = function(){
return "oTimeSeries";
};
//定义 VML Chart 坐标轴类
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;
};
//VerticalChart类，继承Graph
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;
//画坐标系
_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;
var vStroke = document.createElement("v:stroke");
vStroke.StartArrow = "classic";
vLine.appendChild(vStroke);
oContainer.appendChild(vLine);
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;
var vStroke = document.createElement("v:stroke");
vStroke.EndArrow = "classic";
vLine.appendChild(vStroke);
oContainer.appendChild(vLine);
};
//画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-1)*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.AxisX.Color +"'>");
newLine.appendChild(newStroke);
oContainer.appendChild(newLine);
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>");
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);
}
};
//画Y轴刻度
_p.drawLineY = function(oContainer){
var maxData = this.maxs();
maxData += (4 - maxData % 4)
var showPoint = this.AxisY.showPoint;
var dcs = 1;
for(var i=showPoint; i>0; i--){
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轴时存放最大值
for(var i=0; i<=dcs; i++){
py = eval(this.Height*10 - this.Margin[3]) - i*fRowHeight;
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";
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(x-200) +";top:"+
eval(py-50) +";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 = i*(maxData/dcs);
newShape.appendChild(newText);
oContainer.appendChild(newShape);
}
};
//画图例
_p.drawSmallSeries=function(oContainer){
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);
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);
}
};
//-----------------------------------------------------------------------------
