#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);
}
};
//-----------------------------------------------------------------------------
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
