会员登录/控制面版您的位置: 首页 >> 编程开发 >> Javascript >> VML Chart 控件

VML Chart 控件

阅览次数:
文章来源: csdn
原文作者: lxx8402
整理日期: 2005-06-15
发表评论

字体大小:
小
中
大

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>");

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);
}
};
//-----------------------------------------------------------------------------

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);
s.addData(label[i],v);
}
s.Title = "Series 2";
s.Color = "green";
chart.addSeries(s);

chart.draw();

//-->
</SCRIPT>
</div>
</BODY>
</HTML>

[1] [2]

上一篇:深入理解sizeof
下一篇:Photoshop调色，制作阿宝色彩的练习

相关文章

热点文章

VML Chart 控件