JavaScript画图（转载）

 

< script language = javascript >
function  table2(total,table_x,table_y,all_width,all_height,line_no)
... {
//参数含义(传递的数组，横坐标，纵坐标，图表的宽度，图表的高度,折线条数)
//纯ASP代码生成图表函数2——折线图
//作者：龚鸣(Passwordgm) QQ:25968152 MSN:passwordgm@sina.com Email:passwordgm@sina.com
//本人非常愿意和ASP,VML,FLASH的爱好者在HTTP://topclouds.126.com进行交流和探讨
//版本1.0 最后修改日期 2003-8-11
//非常感谢您使用这个函数，请您使用和转载时保留版权信息，这是对作者工作的最好的尊重。
//***************************************************************************************
//修改说明：
//    本代码经原作者同意，由 awaysrain（绝对零度）修改为javascript。
//    最后修改日期 2003-9-22，测试环境为IE 6.0.2500.1106，Firefox不支持
//    因本人水平有限，修改中难免有错误，请大家及时指正。  
//***************************************************************************************
var line_color = "#69f";
var left_width = 70;
var total_no = total[1].length
var temp1,temp2,temp3
temp1 = 0;
for(var i=1;i<total_no;i++)
...{
 for(var j=1;j<=line_no;j++)
 ...{
  if(temp1<total[j][i])
   temp1 = total[j][i];
 }
}
temp1 = parseInt(temp1);
if(temp1>9)
...{
 temp2 = temp1.toString().substr(1,1);
 if(temp2>4)
 ...{
  temp3 = (parseInt(temp1/(Math.pow(10,(temp1.toString().length-1))))+1)*Math.pow(10,(temp1.toString().length-1));
 }
 else
 ...{
  temp3 = (praseInt(temp1/(Math.pow(10,(temp1.toString().length-1))))+0.5)*Math.pow(10,(temp1.toString().length-1))
 }
}
else
...{
 if(temp1>4)
 ...{
  emp3 = 10; 
 }
 else
 ...{
  temp3 = 5;
 }
}
temp4 = temp3;
document.write("<v:rect id='_x0000_s1027' alt='' style='position:absolute;left:" + (table_x + left_width) + "px;top:" + table_y + "px;width:" + all_width + "px;height:" + all_height + "px;z-index:-1' fillcolor='#9cf' stroked='f'><v:fill rotate='t' angle='-45' focus='100%' type='gradient'/></v:rect>");
for(var i=0;i<all_height;i += all_height/5)
...{
 document.write("<v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x + left_width + length) + "px," + (table_y + all_height - length - i) + "px' to='" + (table_x + all_width + left_width) + "px," + (table_y + all_height - length - i) + "px' strokecolor='" + line_color + "'/>");
 document.write("<v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x + (left_width - 15)) + "px," + (table_y + i) + "px' to='" + (table_x + left_width) + "px," + (table_y + i) + "px'/>");
 document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + table_x + "px;top:" + (table_y + i) + "px;width:" + left_width + "px;height:18px;z-index:1'>");
 document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='right'>" + temp4 + "</td></tr></table></v:textbox></v:shape>");
 temp4 = temp4 - temp3/5;
}
document.write("<v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x + left_width) + "px," + (table_y + all_height) + "px' to='" + (table_x + all_width + left_width) + "px," + (table_y + all_height) + "px'/>");
document.write("<v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x + left_width) + "px," + table_y + "px' to='" + (table_x + left_width) + "px," + (table_y + all_height) + "px'/>");
var tmpStr = ""
for(i=1;i<=line_no;i++)
...{
 var re  = /,/g;
 tmpStr += ",["" + total[i][0].replace(re,"","") + ""]"
}
tmpStr = tmpStr.substr(1,tmpStr.length-1)
var line_code = eval("new Array(" + tmpStr + ")")
for(var j=1;j<=line_no;j++)
...{
 for(var i=1;i<total_no-1;i++)
 ...{
  var x1 = table_x + left_width + all_width * (i - 1)/(total_no-1)
  var y1 = table_y + (temp3 - total[j][i]) * (all_height/temp3)
  var x2 = table_x + left_width + all_width * i/(total_no-1)
  var y2 = table_y + (temp3 - total[j][i+1]) * (all_height/temp3)
  
  document.write("<v:line id='_x0000_s1025' alt='' style='position:absolute;left:0;text-align:left;top:0;z-index:1' from='" + x1 + "px," + y1 + "px' to='" + x2 + "px," + y2 + "px' coordsize='21600,21600' strokecolor='" + line_code[j-1][0] + "' strokeweight='" + line_code[j-1][1] + "'>");
  switch (parseInt(line_code[j-1][2]))
  ...{
   case 1:
    break;
   case 2:
    document.write("<v:stroke dashstyle='1 1'/>");
    break;
   case 3:
    document.write("<v:stroke dashstyle='dash'/>");
    break;
   case 4:
    document.write("<v:stroke dashstyle='dashDot'/>");
    break;
   case 5:
    document.write("<v:stroke dashstyle='longDash'/>");
    break;
   case 6:
    document.write("<v:stroke dashstyle='longDashDot'/>");
    break;
   case 7:
    document.write("<v:stroke dashstyle='longDashDotDot'/>");
    break;
  }
  
  document.write("</v:line>");
  
  switch (parseInt(line_code[j-1][3]))
  ...{
   case 1:
    break;
   case 2:
    document.write("<v:rect id='_x0000_s1027' style='position:absolute;left:" + (x1 - 2) + "px;top:" + (y1 - 2) + "px;width:4px;height:4px; z-index:2' fillcolor='" + line_code[j-1][0] + "' strokecolor='" + line_code[j-1][0] + "'/>");
    break;
   case 3:
    document.write("<v:oval id='_x0000_s1026' style='position:absolute;left:" + (x1 - 2) + "px;top:" + (y1 - 2) + "px;width:4px;height:4px;z-index:1' fillcolor='" + line_code[j-1][0] + "' strokecolor='" + line_code[j-1][0] + "'/>");
    break;
  } 
  
 }
  switch (parseInt(line_code[j-1][3]))
  ...{
   case 1:
    break;
   case 2:
    document.write("<v:rect id='_x0000_s1027' style='position:absolute;left:" + (x2 - 2) + "px;top:" + (y2 - 2) + "px;width:4px;height:4px; z-index:2' fillcolor='" + line_code[j-1][0] + "' strokecolor='" + line_code[j-1][0] + "'/>");
    break;
   case 3:
    document.write("<v:oval id='_x0000_s1026' style='position:absolute;left:" + (x2 - 2) + "px;top:" + (y2 - 2) + "px;width:4px;height:4px;z-index:1' fillcolor='" + line_code[j-1][0] + "' strokecolor='" + line_code[j-1][0] + "'/>");
    break;
  }
}
 
for(var i=0;i<total_no-1;i++)
...{
 document.write("<v:line id='_x0000_s1027' alt='' style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:-1' from='" + (table_x + left_width + all_width * (i)/(total_no-1)) + "px," + (table_y + all_height) + "px' to='" + (table_x + left_width + all_width * (i)/(total_no-1)) + "px," + (table_y + all_height + 15) + "px'/>");
 document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + (table_x + left_width + all_width * (i)/(total_no-1)) + "px;top:" + (table_y + all_height) + "px;width:" + (all_width/(total_no-1)) + "px;height:18px;z-index:1'>");
 document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='left'>" + total[0][i] + "</td></tr></table></v:textbox></v:shape>");
}
var tb_height = 30
document.write("<v:rect id='_x0000_s1025' style='position:absolute;left:" + (table_x + all_width + 20) + "px;top:" + table_y + "px;width:100px;height:" + (line_no * tb_height + 20) + "px;z-index:1'/>");
for(var i=0;i<line_no;i++)
...{
 document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + (table_x + all_width + 25) + "px;top:" + (table_y + 10+(i) * tb_height) + "px;width:60px;height:" + tb_height + "px;z-index:1'>");
 document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='left'>" + line_code[i][4] + "</td></tr></table></v:textbox></v:shape>");
 document.write("<v:rect id='_x0000_s1040' alt='' style='position:absolute;left:" + (table_x + all_width + 80) + "px;top:" + (table_y + 10+(i) * tb_height + 4) + "px;width:30px;height:20px;z-index:1' fillcolor='" + line_code[i][0] + "'><v:fill color2='" + line_code[i][0] + "' rotate='t' focus='100%' type='gradient'/></v:rect>");
}
}
</ script >
< html xmlns:v = " urn:schemas-microsoft-com:vml "  xmlns:o = " urn:schemas-microsoft-com:office:office " >
<!-- [ if   ! mso] >
< style >
v: *           ... { behavior: url(#default#VML) }
o: *           ... { behavior: url(#default#VML) }
.shape        ... { behavior: url(#default#VML) }
</ style >
<! [endif] -->
< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 " >
< title ></ title >
< style >
TD  ... { FONT-SIZE: 9pt}
</ style ></ head >
< body topmargin = 5  leftmargin = 0  scroll = AUTO >
< script language = javascript >
var  nameArray  =   new  Array();
nameArray[ 0 ] = " 中国经营报 "
nameArray[ 1 ] = " 招聘网 "
nameArray[ 2 ] = " 51Job "
nameArray[ 3 ] = " 新民晚报 "
nameArray[ 4 ] = " 新闻晚报 "
nameArray[ 5 ] = " 南方周末 "
nameArray[ 6 ] = " 羊城晚报 "
var  dataArray1  =   new  Array()
dataArray1[ 0 ] = " #FF0000,1.5,1,2,公司1 " // 参数1线条的颜色，参数2线条的宽度，参数3线条的类型，参数4转折点的类型,参数5线条名称
dataArray1[ 1 ] = 200
dataArray1[ 2 ] = 1200
dataArray1[ 3 ] = 900
dataArray1[ 4 ] = 600
dataArray1[ 5 ] = 1222
dataArray1[ 6 ] = 413
dataArray1[ 7 ] = 800
var  dataArray2  =   new  Array()
dataArray2[ 0 ] = " #0000FF,1,2,3,公司2 "
dataArray2[ 1 ] = 400
dataArray2[ 2 ] = 500
dataArray2[ 3 ] = 1040
dataArray2[ 4 ] = 1600
dataArray2[ 5 ] = 522
dataArray2[ 6 ] = 813
dataArray2[ 7 ] = 980
var  dataArray3  =   new  Array()
dataArray3[ 0 ] = " #004D00,1,1,3,公司3 "
dataArray3[ 1 ] = 900
dataArray3[ 2 ] = 890
dataArray3[ 3 ] = 1240
dataArray3[ 4 ] = 1300
dataArray3[ 5 ] = 722
dataArray3[ 6 ] = 833
dataArray3[ 7 ] = 1280
var  total  =   new  Array(nameArray,dataArray1,dataArray2,dataArray3)
table2(total, 100 , 90 , 600 , 250 , 3 );
</ script >
</ body >
</ html >

<!--
在IE中，动态生成折线图
-->
< html xmlns:vml = " urn:schemas-microsoft-com:vml " >
< head >
< META NAME = " Author "  CONTENT = " Zhigang Xie " >
< META NAME = " Keywords "  CONTENT = " VML Draw Line " >
< META NAME = " Description "  CONTENT = "" >
< title >
How to create a line
</ title >
< style >
vml: *   ... { behavior: url(#default#VML) }
</ style >
</ head >

< body >
< h2 > While feedding  in  the position and click the buttons, then you ' ll get a line bellow:</h2><br/>
<input type=button value="Line By" οnclick="lineBy();"> 
<input type=button value="Back" οnclick="bk();">
<input type=button value="Clear" οnclick="clr();"><br/>
X=<input id=toX size=3 style="text-align:right" value=0>pt; Y=<input id=toY size=3 style="text-align:right" value=0>pt;<br/>
<div id=dr></div>
<script>
var tx = new Array();
var ty = new Array();
function clr(){
tx.length = 1; tx[0] = 0;
ty.length = 1; ty[0] = 0;
dr.innerHTML = "";
}
function lineBy(){
var x, y;
x = parseInt(toX.value);
y = parseInt(toY.value);
if(isNaN(x) || isNaN(y)){
alert("Please input integer numbers for the position.");
return false;
}
tx.length++; tx[tx.length-1] = x + tx[tx.length-2];
ty.length++; ty[ty.length-1] = y + ty[ty.length-2];
drawLine();
}
function bk(){
if(tx.length>2){
tx.length--; ty.length--;
drawLine();
return true;
}

if(tx.length==2){
tx.length--; ty.length--;
dr.innerHTML = "";
return true;
}

}
function drawLine(){
var s = "";
for(var i=0; i<tx.length; i++){
s += " " + tx[i] + "pt," + ty[i] + "pt";
}
s = s.replace(/^[s]+/,"");
s = s.replace(/[s]+$/,"");
//alert(s);

s = "<vml:polyline points="" + s + "" filled="false">";
dr.innerHTML = s; 
}
clr();

</script>
</body>
</html>
<script>
// TimerBar.JS
// Timer Bar - Version 1.0
// Author: Brian Gosselin of http://scriptasylum.com
// Script featured on http://www.dynamicdrive.com

var loadedcolor= ' darkgray '  ; // PROGRESS BAR COLOR
var unloadedcolor= ' lightgrey ' ; // COLOR OF UNLOADED AREA
var bordercolor= ' navy ' ; // COLOR OF THE BORDER
var barheight=15; // HEIGHT OF PROGRESS BAR IN PIXELS
var barwidth=300; // WIDTH OF THE BAR IN PIXELS
var waitTime=5; // NUMBER OF SECONDS FOR PROGRESSBAR

// THE FUNCTION BELOW CONTAINS THE ACTION(S) TAKEN ONCE BAR REACHES 100%.
// IF NO ACTION IS DESIRED, TAKE EVERYTHING OUT FROM BETWEEN THE CURLY BRACES ({})
// BUT LEAVE THE FUNCTION NAME AND CURLY BRACES IN PLACE.
// PRESENTLY, IT IS SET TO DO NOTHING, BUT CAN BE CHANGED EASILY.
// TO CAUSE A REDIRECT TO ANOTHER PAGE, INSERT THE FOLLOWING LINE:
// window.location="http://redirect_page.html";
// JUST CHANGE THE ACTUAL URL OF COURSE :)

var action=function()
{
alert("Welcome to Dynamic Drive!");
//window.location="http://www.dynamicdrive.com
}

//*****************************************************//
//********** DO NOT EDIT BEYOND THIS POINT **********//
//*****************************************************//

var ns4=(document.layers)?true:false;
var ie4=(document.all)?true:false;
var blocksize=(barwidth-2)/waitTime/10;
var loaded=0;
var PBouter;
var PBdone;
var PBbckgnd;
var Pid=0;
var txt= '' ;
if(ns4){
txt+= ' < table border = 0  cellpadding = 0  cellspacing = 0 >< tr >< td > ' ;
txt+= ' < ilayer name = " PBouter "  visibility = " hide "  height = " '+barheight+' "  width = " '+barwidth+' "  onmouseup = " hidebar() " > ' ;
txt+= ' < layer width = " '+barwidth+' "  height = " '+barheight+' "  bgcolor = " '+bordercolor+' "  top = " 0 "  left = " 0 " ></ layer > ' ;
txt+= ' < layer width = " '+(barwidth-2)+' "  height = " '+(barheight-2)+' "  bgcolor = " '+unloadedcolor+' "  top = " 1 "  left = " 1 " ></ layer > ' ;
txt+= ' < layer name = " PBdone "  width = " '+(barwidth-2)+' "  height = " '+(barheight-2)+' "  bgcolor = " '+loadedcolor+' "  top = " 1 "  left = " 1 " ></ layer > ' ;
txt+= ' </ ilayer > ' ;
txt+= ' </ td ></ tr ></ table > ' ;
}else{
txt+= ' < div id = " PBouter "  onmouseup = " hidebar() "  style = " position:relative; visibility:hidden; background-color:'+bordercolor+'; width:'+barwidth+'px; height:'+barheight+'px; " > ' ;
txt+= ' < div style = " position:absolute; top:1px; left:1px; width:'+(barwidth-2)+'px; height:'+(barheight-2)+'px; background-color:'+unloadedcolor+'; font-size:1px; " ></ div > ' ;
txt+= ' < div id = " PBdone "  style = " position:absolute; top:1px; left:1px; width:0px; height:'+(barheight-2)+'px; background-color:'+loadedcolor+'; font-size:1px; " ></ div > ' ;
txt+= ' </ div > ' ;
}

document.write(txt);

function incrCount(){
window.status="Loading...";
loaded++;
if(loaded<0)loaded=0;
if(loaded>=waitTime*10){
clearInterval(Pid);
loaded=waitTime*10;
setTimeout( ' hidebar() ' ,100);
}
resizeEl(PBdone, 0, blocksize*loaded, barheight-2, 0);
}

function hidebar(){
clearInterval(Pid);
window.status= '' ;
//if(ns4)PBouter.visibility="hide";
//else PBouter.style.visibility="hidden";
action();
}

//THIS FUNCTION BY MIKE HALL OF BRAINJAR.COM
function findlayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers[i];
if(layer.name==name)return layer;
if(layer.document.layers.length>0)
if((layer=findlayer(name,layer.document))!=null)
return layer;
}
return null;
}

function progressBarInit(){
PBouter=(ns4)?findlayer( ' PBouter ' ,document):(ie4)?document.all[ ' PBouter ' ]:document.getElementById( ' PBouter ' );
PBdone=(ns4)?PBouter.document.layers[ ' PBdone ' ]:(ie4)?document.all[ ' PBdone ' ]:document.getElementById( ' PBdone ' );
resizeEl(PBdone,0,0,barheight-2,0);
if(ns4)PBouter.visibility="show";
else PBouter.style.visibility="visible";
Pid=setInterval( ' incrCount() ' ,95);
}

function resizeEl(id,t,r,b,l){
if(ns4){
id.clip.left=l;
id.clip.top=t;
id.clip.right=r;
id.clip.bottom=b;
}else id.style.width=r+ ' px ' ;
}

window.οnlοad=progressBarInit;
</script>

 

 

另外附上一个.net的例子

< span >
using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Web;
using  System.Web.UI;
using  OWC11;
namespace  licChart
... {
/**//// <summary>
/// Line 的摘要说明。
/// </summary>
public class ChartLine3:System.Web.UI.Page
...{
  public string toChartLine3(DataSet myDataSet,string YValue,string Series,string xTitle,string yTitle,string ChartTitle)
  ...{
   // 在此处放置用户代码以初始化页面
   
   //创建ChartSpace对象来放置图表
   OWC11.ChartSpace objCSpace = new OWC11.ChartSpaceClass (); 
   //在ChartSpace对象中添加图表，Add方法返回chart对象
   OWC11.ChChart objChart = objCSpace.Charts.Add (0); 
   //指定图表的类型。类型由OWC11.ChartChartTypeEnum枚举值得到
   objChart.Type = OWC11.ChartChartTypeEnum.chChartTypeLine;
   //给定标题
   objChart.HasTitle = true;
   //objChart.Title.Caption= ChartNmae;
   //给定x,y轴的图示说明
   objChart.Title.Caption= ChartTitle;
   //给定x,y轴的图示说明
   objChart.Axes[0].HasTitle = true;
   objChart.Axes[0].Title.Caption = xTitle;
   objChart.Axes[1].HasTitle = true;
   objChart.Axes[1].Title.Caption = yTitle;
   //计算数据
   //objCSpace.DataSource=(msdatasrc.DataSource)dataSet;
  
   
   if(Series!="")
   ...{
    //指定图表是否需要图例
    objChart.HasLegend = true;
    string[] Ser=Series.ToString().Split(',');
    string[] Ser1=Series.ToString().Split(',');
    string[] YValue_temp=YValue.ToString().Split(',');
    string[] strValue=new string[YValue_temp.Length];
    string[] strCategory=new string[YValue_temp.Length];
    //循环数据集得到不重复的序列名
    for(int i=0;i<=Ser.Length-1;i++)
    ...{
     //把第一行的Ser[i]列放入字符串
     string Series1=myDataSet.Tables[0].Rows[0][Ser[i]].ToString();
   
     //循环数据集得出与字符串内不同的Ser[i]值，放入字符串
     for(int j=1;j<=myDataSet.Tables[0].Rows.Count-1;j++)
     ...{
      //将字符串分割成数组
      string[] Series11=Series1.Split(',');
      int k=0;
      //将数据集各行的Ser[i]值与分割后的数组中的每个值循环比较，都不同的话加到字符串中
      for(int w=0;w<=Series11.Length-1;w++)
      ...{
       //如果与字符串中的某个值相等k增加1
       if(myDataSet.Tables[0].Rows[j][Ser[i]].ToString()==Series11[w]) k++;
     
      }
      //k不等0说明没有重复的项，将该行此项添加进字符串
      if(k==0)Series1+=","+myDataSet.Tables[0].Rows[j][Ser[i]].ToString();
     }
     //将最后得出的不重复的某序列存进数组
     Ser[i]=Series1;
    }
    int v_num=1;
    //得出动态数组的长度个序列值个数的乘积
    for(int i=0;i<=Ser.Length-1;i++)
    ...{ 
     string[] v_str=Ser[i].Split(',');
     v_num=v_num*v_str.Length;
    }
    string[] v_str_all=new string[v_num];//定义存放序列的数组.
    string temp="";
    int v_j=0;
    if(Ser.Length==1)   
    ...{
     for(int i=0;i<=Ser.Length-1;i++)
     ...{ 
      string[] v_str=Ser[i].Split(',');
      for(int j=0;j<=v_str.Length-1;j++)
      ...{
       for(int k=v_num-1;k>=0;k--)
       ...{
        int v_step=v_num/v_str.Length;
        if((k>=j*(v_step))&&(k<(j+1)*v_step))
       
         // if(k%v_str.Length==0)
        ...{
         v_str_all[k]=v_str_all[k]+v_str[j]+"-";
        }
       
       }
      }
     }
    }
    else
    ...{
     for(int i=1;i<=Ser.Length-1;i++)
     ...{ 
      if(i!=1)Ser[0]=Ser[0].Substring(0,Ser[0].Length-1);
      string[] ser1=Ser[0].Split(',');
      Ser[0]="";
      for(int j=0;j<=ser1.Length-1;j++)
      ...{ 
       string[] ser2=Ser[i].Split(',');
       for(int k=0;k<=ser2.Length-1;k++)
       ...{
        Ser[0]+=ser1[j]+"-"+ser2[k]+",";
       }
      }
     }
     Ser[0]=Ser[0].Substring(0,Ser[0].Length-1);
    }
    
    v_str_all=Ser[0].Split(',');
    if(Ser.Length==1)
    ...{
     for(int k=0;k<v_str_all.Length;k++)
     ...{
      v_str_all[k]=v_str_all[k].Substring(0,v_str_all[k].Length-1);
     }
    }
    string Seriestemp="";
    //string[] Ser1={"stcode","ye","ndisc","quarter"};
    
    for(int j=0;j<=myDataSet.Tables[0].Rows.Count-1;j++)
    ...{
     Seriestemp="";
     for(int w=0;w<=Ser1.Length-1;w++)
     ...{ 
      
      Seriestemp+=myDataSet.Tables[0].Rows[j][Ser1[w]].ToString()+"-";
      
     }
     Seriestemp=Seriestemp.Substring(0,Seriestemp.Length-1);
     for(int i=0;i<=v_str_all.Length-1;i++)
     ...{
      if(Seriestemp==v_str_all[i])
      ...{
      
       for(int q=0;q<=YValue_temp.Length-1;q++)
       ...{
      
        strValue[q]+=myDataSet.Tables[0].Rows[j][YValue_temp[q]].ToString()+' ';
        strCategory[q]+=v_str_all[i]+' ';
       }
      }
     }
      
    }
   
    

    //添加一个series
    string[] YValue1=YValue.ToString().Split(',');
    for(int i=0;i<=strCategory.Length-1;i++)
    ...{
     objChart.SeriesCollection.Add(i);
     //objChart.SeriesCollection[i].DataLabelsCollection[i].HasCategoryName = true;
     
     //给定series的名字
     objChart.SeriesCollection[i].SetData (OWC11.ChartDimensionsEnum.chDimSeriesNames,
      + (int)OWC11.ChartSpecialDataSourcesEnum.chDataLiteral, YValue1[i]);
     //给定分类
     objChart.SeriesCollection[i].SetData (OWC11.ChartDimensionsEnum.chDimCategories,
      + (int)OWC11.ChartSpecialDataSourcesEnum.chDataLiteral, strCategory[i]);
     //给定值
     objChart.SeriesCollection[i].SetData
      (OWC11.ChartDimensionsEnum.chDimValues,
      (int)OWC11.ChartSpecialDataSourcesEnum.chDataLiteral, strValue[i]); 
    }
   }
   
   //输出成GIF文件.
   //string strAbsolutePath = (Server.MapPath(".")) + "/test1.gif";
   Random vRandom=new Random();
   int vRandomInt=vRandom.Next(10000,30000);
            string vRandomStr=vRandomInt.ToString();
   vRandomInt=vRandom.Next(10000,30000);
   vRandomStr=vRandomStr+vRandomInt.ToString();
   string strAbsolutePath = (Server.MapPath("/")) + "temp/" + vRandomStr + ".gif";
   objCSpace.ExportPicture(strAbsolutePath, "GIF", 640,480);
   //创建GIF文件的相对路径.
   string strRelativePath = "/temp/" + vRandomStr + ".gif";
   //把图片添加到placeholder.
   string strImageTag = "<IMG SRC='" + strRelativePath + "'/>";
   return strImageTag;
  }
  
}
}
</ span >

 

JavaScript绘图

DRA

1. <html>   
2.    
3.   <head>  
4.   <title>JavaScript繪圖--jun_bai@sohu.com</title>  
5.   <script   language="JavaScript">    
6.   IE4   =   !   (navigator.appVersion.charAt(0)   <   "4"   ||   navigator.appName   ==   "Netscape")    
7.    
8.   var   xo=0    
9.   var   yo=0    
10.   var   Ox   =   -1    
11.   var   Oy   =   -1    
12.    
13.   var   rad   =   Math.PI/180    
14.   var   maxY   =   400    
15.   var   color   =   "red"    
16.    
17.   function   print(str)   {    
18.   document.write(str)    
19.   }    
20.    
21.   function   orgY(y)   {    
22.   return   maxY-y    
23.   }    
24.   function   outPlot(x,y,w,h)   {    
25.   print('<span   style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>')    
26.   }    
27.    
28.   function   Plot(x,y)   {    
29.   outPlot(x,y,1,1)    
30.   if(Ox>=0   ||   Oy>=0)   {    
31.   ShowLine(Ox,Oy,x-Ox,y-Oy)    
32.   }    
33.   Ox   =   x    
34.   Oy   =   y    
35.   }    
36.    
37.   function   ShowLine(x,y,w,h)   {    
38.   if(w<0)   {    
39.   x   +=   w    
40.   w   =   Math.abs(w)    
41.   }    
42.   if(h<0)   {    
43.   y   +=   h    
44.   h   =   Math.abs(h)    
45.   }    
46.   if(w<1)   w=1    
47.   if(h<1)   h=1    
48.   outPlot(x,y,Math.round(w),Math.round(h))    
49.   }    
50.    
51.   function   LineTo(x,y)   {    
52.   Line(xo,yo,x,y)    
53.   }    
54.    
55.   function   sign(n)   {    
56.   if(n>0)    
57.   return   1    
58.   if(n<0)    
59.   return   -1    
60.   return   n    
61.   }    
62.    
63.   function   Line(x1,y1,x2,y2)   {    
64.   x2   =   Math.round(x2)    
65.   y2   =   Math.round(y2)    
66.   xo   =   x2    
67.   yo   =   y2    
68.   y1   =   orgY(y1)    
69.   y2   =   orgY(y2)    
70.   var   str   =   ""    
71.   var   i=0    
72.    
73.   var   x   =   x1    
74.   var   y   =   y1    
75.   dx   =   Math.abs(x2-x1)    
76.   dy   =   Math.abs(y2-y1)    
77.   s1   =   sign(x2-x1)    
78.   s2   =   sign(y2-y1)    
79.    
80.   if(dx==0   ||   dy==0)   {    
81.   ShowLine(x1,y1,x2-x1,y2-y1)    
82.   return    
83.   }    
84.    
85.   if(dx>dy)   {    
86.   temp   =   dx    
87.   dx   =   dy    
88.   dy   =   temp    
89.   key   =   1    
90.   }else    
91.   key   =   0    
92.   e   =   2*dy-dx    
93.    
94.   for(i=0;i<dx;i++)   {    
95.   px   =   0    
96.   py   =   0    
97.   Plot(x,y)    
98.   while(e>=0)   {    
99.   if(key==1)   {    
100.   x   +=   s1    
101.   px   +=   s1    
102.   }else   {    
103.   y   +=   s2    
104.   py   +=   s2    
105.   }    
106.   e   =   e-2*dx    
107.   }    
108.   if(key==1)    
109.   y   +=   s2    
110.   else    
111.   x   +=   s1    
112.   e   =   e+2*dy    
113.   }    
114.   }    
115.    
116.   function   MoveTo(x,y)   {    
117.   Ox   =   Oy   =   -1    
118.   xo   =   Math.round(x)    
119.   yo   =   Math.round(y)    
120.   }    
121.    
122.   //   圓    
123.   function   Cir(x,y,r)   {    
124.   MoveTo(x+r,y)    
125.   for(i=0;i<=360;i+=5)   {    
126.   LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)    
127.   }    
128.   }    
129.   //   弧形    
130.   function   Arc(x,y,r,a1,a2)   {    
131.   MoveTo(r*Math.cos(a1*rad)+x,r*Math.sin(a1*rad)+y)    
132.   for(i=a1;i<=a2;i++)   {    
133.   LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)    
134.   }    
135.   }    
136.   //   扇形    
137.   function   Pei(x,y,r,a1,a2)   {    
138.   MoveTo(x,y)    
139.   for(var   i=a1;i<=a2;i++)   {    
140.   LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)    
141.   }    
142.   LineTo(x,y)    
143.   }    
144.   //   彈出扇形    
145.   function   PopPei(x,y,r,a1,a2)   {    
146.   dx   =   r*Math.cos((a1+(a2-a1)/2)*rad)/10    
147.   dy   =   r*Math.sin((a1+(a2-a1)/2)*rad)/10    
148.   x   +=   dx    
149.   y   +=   dy    
150.   MoveTo(x,y)    
151.   for(var   i=a1;i<=a2;i++)   {    
152.   LineTo(r*Math.cos(i*rad)+x,r*Math.sin(i*rad)+y)    
153.   }    
154.   LineTo(x,y)    
155.   }    
156.    
157.   //   矩形    
158.   function   Rect(x,y,w,h)   {    
159.   MoveTo(x,y)    
160.   LineTo(x+w,y)    
161.   LineTo(x+w,y+h)    
162.   LineTo(x,y+h)    
163.   LineTo(x,y)    
164.   }    
165.    
166.   //   准星    
167.   function   zhunxing(x,y)   {    
168.   var   ox   =   xo    
169.   var   oy   =   yo    
170.   var   oColor   =   color    
171.   color   =   "#000000"    
172.   Line(x-5,y,x+6,y)    
173.   Line(x,y-6,x,y+5)    
174.   print('<span   style="position:absolute;font-size:10pt;left:'+(x+5)+';top:'+orgY(y+5)+';">['+x+','+y+']</span>')    
175.   color   =   oColor    
176.   xo   =   ox    
177.   yo   =   oy    
178.   }    
179.   //   標注    
180.   function   biaozhuStr(x,y,s)   {    
181.   return   '<span   style="position:absolute;font-size:10pt;left:'+x+';top:'+orgY(y)+';">'+s+'</span>'    
182.   }    
183.   function   biaozhu(x,y,s,t)   {    
184.   var   ox   =   xo    
185.   var   oy   =   yo    
186.   var   oColor   =   color    
187.   point   =   "p01.gif"    
188.   if(t==1)   {    
189.   print(biaozhuStr(x-5,y+6,"?"+s))    
190.   }    
191.   if(t==2)   {    
192.   print(biaozhuStr(xo+x*Math.cos(y*rad)-10,yo+x*Math.sin(y*rad),s))    
193.   }    
194.   color   =   oColor    
195.   xo   =   ox    
196.   yo   =   oy    
197.   }    
198.   </script>    
199.   <meta   name="GENERATOR"   content="Microsoft   FrontPage   4.0">  
200.   <meta   name="ProgId"   content="FrontPage.Editor.Document">  
201.   </head>  
202.    
203.   <body>  
204.    
205.   <table   border="0"   width="100%">  
206.       <tr>  
207.           <td   width="100%"   style="font-family:   方正舒体;   font-size:   18pt;   color:   #FF0000"   class="t1">JavaScript繪圖</td>  
208.       </tr>  
209.       <tr>  
210.           <td   width="100%"   style="font-family:   幼圓;   font-size:   12pt;   color:   #008000"   class="t2">如果需要在网頁上提供圖形化的資料，通常是將其制作成圖片，但這樣一來网絡上的開銷就太大了。有什么辦法呢？這里向你提供一組JavaScript函數，來解決這一問題。雖然簡單了點，但是對畫點線圖來說還是綽綽有余的！</td>  
211.       </tr>  
212.   </table>  
213.    
214.   <script>    
215.   if(IE4)   {    
216.    
217.   //   基本圖形    
218.   color   =   "maroon"    
219.   Cir(50,40,20)    
220.   Arc(100,40,20,60,120)    
221.   Pei(150,60,40,240,300)    
222.   Rect(200,20,40,40)    
223.    
224.   //   折線圖    
225.   color   =   "#FF0000"    
226.   var   jd   =   new   Array(    
227.   203,232,277,223,271,234,273,284,276,250,267,280    
228.   )    
229.   MoveTo(30,jd[0]-40)    
230.   biaozhu(xo,yo,jd[0])    
231.   for(i=1;i<jd.length;i++)   {    
232.   LineTo(i*30+30,jd[i]-40)    
233.   biaozhu(xo,yo,jd[i],1)    
234.   }    
235.   color   =   "#C0C0C0"    
236.   Line(30,140,i*30+30,140)    
237.   Line(30,140,30,260)    
238.    
239.    
240.   //   餅圖    
241.   color   =   "#00FF00"    
242.   var   gc   =   new   Array(    
243.   150,120,200,180,180    
244.   )    
245.   var   s   =   0    
246.   var   m   =   0    
247.   var   n   =   0    
248.   for(i=0;i<gc.length;i++)   {    
249.   s   +=gc[i]    
250.   if(gc[i]   >   m)   {    
251.   m   =   gc[i]    
252.   n   =   i    
253.   }    
254.   }    
255.   var   k   =   s/360    
256.   var   mm   =   0    
257.   var   a   =0    
258.   for(i=0;i<gc.length;i++)   {    
259.   b   =   Math.round((gc[i]+mm)/k)    
260.   if(i==n)    
261.   PopPei(600,150,100,a,b)    
262.   else    
263.   Pei(600,150,100,a,b)    
264.   biaozhu(60,a+(b-a)/2,Math.round(gc[i]/s*100)+"%",2)    
265.   mm   =   mm+gc[i]    
266.   a   =   b    
267.   }    
268.    
269.   //   十字標注    
270.   MoveTo(280,20)    
271.   zhunxing(xo,yo)    
272.    
273.   }else   {    
274.   document.write("<p>   </p><table   bgcolor=#FF0000><tr><td><font   color=#FFFF00>對不起！您的瀏覽器不能支持該頁的某些功能，請換用IE4.0以上版本的瀏覽器！謝謝！</font>& lt;/td></tr></table>")    
275.   }    
276.   </script>    
277.    
278.   </body>  
279.    
280.   </html>   

W

using  System; 
using  System.Drawing; 
using  System.Drawing.Drawing2D; 
namespace  wchart 
... { 
   /**//// <summary> 
   /// CSChart 的摘要说明。 
   /// </summary> 
   public class CSChart 
   ...{ 
      private int ypercent;  //纵坐标分段数 
      private int xpercent;  //横坐标分段数 
      private int width;     //绘图区宽 
      private int height;    //绘图区高 
      private bool xcenter; //是不以X轴Y轴交点作为X轴的起始坐标点 
      private int xpercentvalue;//X轴每段表示的值 
      private int ypercentvalue;//Y轴每段表示的值 
      private int xstartvalue;//X轴超始值 
      private int ystartvalue;//Y轴起始值 
      private int xlinelength;//X轴长 
      private int ylinelength;//Y轴长 
      private string xname;//X辆名 
      private string yname;//Y轴名 
      private int[] data;  //绘图数据 
      private Graphics gt; //绘图设备 
      public int[] Data 
      ...{ 
         set 
         ...{ 
            data=value; 
         } 
         get 
         ...{ 
            return data; 
         } 
      }*/ 
      public Graphics g 
      ...{ 
         set 
         ...{ 
            gt=value; 
         } 
         get 
         ...{ 
            return gt; 
         } 
      } 
      public int YPercent 
      ...{ 
         set 
         ...{ 
            ypercent=value; 
         } 
         get 
         ...{ 
            return ypercent; 
         } 
    
      } 

      public int XPercent 
      ...{ 
         set 
         ...{ 
            xpercent=value; 
         } 
         get 
         ...{ 
            return xpercent; 
         } 
      } 
      public int XPercentValue 
      ...{ 
         set 
         ...{ 
            xpercentvalue=value; 
         } 
         get 
         ...{ 
            return xpercentvalue; 
         } 
      } 
      public int YPercentValue 
      ...{ 
         set 
         ...{ 
            ypercentvalue=value; 
         } 
         get 
         ...{ 
            return ypercentvalue; 
         } 
      } 
      public int XStartValue 
      ...{ 
         set 
         ...{ 
            xstartvalue=value; 
         } 
         get 
         ...{ 
            return xstartvalue; 
         } 

      } 
      public int YStartValue 
      ...{ 
         set 
         ...{ 
            ystartvalue=value; 
         } 
         get 
         ...{ 
            return ystartvalue; 
         } 

      } 

      public int XLineLength 
      ...{ 
         set 
         ...{ 
            xlinelength=value; 
         } 
         get 
         ...{ 
            return xlinelength; 
         } 
      } 
      public int YLineLength 
      ...{ 
         set 
         ...{ 
            ylinelength=value; 
         } 
         get 
         ...{ 
            return ylinelength; 
         } 
      } 


      public string XName 
      ...{ 
         set 
         ...{ 
            xname=value; 
         } 
         get 
         ...{ 
            return xname; 
         } 
      } 
      public string YName 
      ...{ 
         set 
         ...{ 
            yname=value; 
         } 
         get 
         ...{ 
            return yname; 
         } 
      } 
      public int Width 
      ...{ 
         set...{width=value;} 
         get...{return width;} 
      } 
      public int Height 
      ...{ 
         set...{height=value;} 
         get...{return height;} 
      } 
      public CSChart() 
      ...{ 
         // 
         // TODO: 在此处添加构造函数逻辑 
         // 
         xpercent=10; 
         ypercent=10; 
         width=600; 
         height=500; 
         xpercentvalue=1; 
         ypercentvalue=10; 
         xstartvalue=1990; 
         ystartvalue=0; 
         yname="值"; 
         xname="变量"; 
         xcenter=false; 
         xlinelength=400; 
         ylinelength=400; 
         data = new int[10]...{10,50,48,56,75,21,62,12,45,90}; 
      } 
      public void DrawCross(Brush brush,int linewidth,bool center) 
      ...{ 
         Pen CrossPen = new Pen(brush,linewidth); 
         Font font = new Font("宋体",10); 
         xcenter=center; 
         g.DrawLine(CrossPen,80,height-80,80+xlinelength,height-80);//画X轴 
         Point[] Points = new Point[3];//定义X轴箭头 
         Points[0].X=80+xlinelength;Points[0].Y=height-85; 
         Points[1].X=80+xlinelength;Points[1].Y=height-75; 
         Points[2].X=100+xlinelength;Points[2].Y=height-80; 
         g.FillPolygon(brush,Points); //画X轴箭头 
         g.DrawString(xname,font,brush,100+xlinelength,height-80);//X轴名 
         if(center) 
         ...{ 
            for(int i=0;i<xpercent;i++) 
            ...{ 
               g.DrawLine(CrossPen,80+xlinelength/xpercent/2+i*xlinelength/xpercent,height-80,80+xlinelength/xpercent/2+i*xlinelength/xpercent,height-76);//画X轴单位点 
               g.DrawString(Convert.ToString(xstartvalue+i*xpercentvalue),font,new SolidBrush(Color.Black),80+xlinelength/xpercent/2+i*xlinelength/xpercent-xstartvalue.ToString().Length*font.Size/2,height-75);//画X轴坐标值 
            
            } 
         } 
         else 
         ...{ 
            for(int i=0;i<xpercent;i++) 
            ...{ 
               g.DrawLine(CrossPen,80+i*xlinelength/xpercent,height-80,80+i*xlinelength/xpercent,height-76);//画X轴单位点 
               g.DrawString(Convert.ToString(xstartvalue+i*xpercentvalue),font,new SolidBrush(Color.Black),80+i*xlinelength/xpercent-xstartvalue.ToString().Length*font.Size/2,height-75);//画X轴坐标值 
            
            } 
         } 
         g.DrawLine(CrossPen,80,height-80,80,height-80-ylinelength);//画Y轴 
         Points[0].X=75;Points[0].Y=height-80-ylinelength; //Y轴箭头 
         Points[1].X=85;Points[1].Y=height-80-ylinelength; 
         Points[2].X=80;Points[2].Y=height-100-ylinelength; 
         g.FillPolygon(brush,Points);//画Y轴箭头 
         g.DrawString(yname,font,brush,85,height-80-ylinelength);//画Y轴名 
         for(int i=0;i<ypercent;i++) 
         ...{ 
            g.DrawLine(CrossPen,80,height-80-i*ylinelength/ypercent,76,height-80-i*ylinelength/ypercent);//画Y轴单位点 
            g.DrawString(Convert.ToString(ystartvalue+i*ypercentvalue),font,new SolidBrush(Color.Black),50,height-85-i*ylinelength/ypercent);//画X轴坐标值 
         } 
      } 
      public void DrawChartName(string name,Font font,Brush brush)//画统计表头(名) 
      ...{ 
         g.DrawString(name,font,brush,(width-name.Length*font.Size)/2,30); 
      } 
      public void DrawChart(int[]data,Graphics g) 
      ...{ 
         Brush brush = new SolidBrush(Color.Black); 
         Pen CrossPen = new Pen(brush,2); 
         g.DrawLine(CrossPen,100,50,100,400); 
         g.DrawLine(CrossPen,100,400,500,400); 
         Point[] HPoints = new Point[3]; 
         HPoints[0].X=95;HPoints[0].Y=50; 
         HPoints[1].X=105;HPoints[1].Y=50; 
         HPoints[2].X=100;HPoints[2].Y=30; 

         Point[] YPoints = new Point[3]; 
         YPoints[0].X=500;YPoints[0].Y=395; 
         YPoints[1].X=500;YPoints[1].Y=405; 
         YPoints[2].X=520;YPoints[2].Y=400; 
         g.FillPolygon(brush,HPoints); 
         g.FillPolygon(brush,YPoints); 
         int h=0; 
         for(int i=0;i<12;i++) 
         ...{ 
            g.DrawLine(CrossPen,100,400-30*i,104,400-30*i); 
            h=i*10; 
            g.DrawString(h.ToString(),new Font("宋体",10),brush,75,395-i*30); 
         } 
         for(int i=0;i<10;i++) 
         ...{ 
            g.DrawLine(CrossPen,100+i*40,400,100+i*40,404); 
            g.DrawString(i.ToString(),new Font("宋体",10),brush,95+i*40,410); 
         } 
         g.DrawString("数字",new Font("宋体",10),brush,500,410); 
         g.DrawString("人数/人",new Font("宋体",10),brush,105,50); 
         for(int i=0;i<data.Length;i++) 
         ...{ 
            int hight =300*data[i]/100; 
            g.FillRectangle(new SolidBrush(Color.Red),new Rectangle(105+40*i,400-hight,20,hight)); 
         } 
      } 
      public bool SetData(int[] newdata) 
      ...{ 
         if(newdata.Length==xpercent) 
         ...{ 
            data=newdata; 
            return true; 
         } 
         else 
            return false; 
      } 
      public void DrawLineData(Color color,int linewidth) 
      ...{ 
         Pen pen = new Pen(new SolidBrush(color),linewidth); 
         Point[] points = new Point[xpercent]; 
         for(int i=0;i<xpercent;i++) 
         ...{ 
            if(xcenter) 
            ...{ 
               points[i].X=80+xlinelength/xpercent/2+i*xlinelength/xpercent; 
               points[i].Y=height-80-(data[i]-ystartvalue)*ylinelength/ypercentvalue/ypercent; 

            } 
            else 
            ...{ 
               points[i].X=80+i*xlinelength/xpercent; 
               points[i].Y=height-80-(data[i]-ystartvalue)*ylinelength/ypercentvalue/ypercent; 
            } 
         } 
         g.DrawLines(pen,points); 
      } 
      public void DrawRecData(Color color,int recwidth)//画统计表长条 
      ...{ 
         SolidBrush brush = new SolidBrush(color); 
         Pen  pen = new Pen(brush,1); 
         for(int i=0;i<ypercent;i++) 
         ...{ 
                
            g.FillRectangle(brush,80+i*xlinelength/xpercent+(xlinelength/xpercent-recwidth)/2,height-80-(data[i]-ystartvalue)*ylinelength/ypercentvalue/ypercent,recwidth,(data[i]-ystartvalue)*ylinelength/ypercentvalue/ypercent); 
         } 
      } 
   } 
}  

实现将生成的图表自动加到一个word文件中
Bitmap bmp  =   new  Bitmap( 600 , 600 ); 
Graphics g =  Grapphics.FromImage(bmp); 
CSChart cst = new  CSChart(); 
cst.g = g; 
  g.Draw()....绘图 
MemoryStream sm  =   new  MemoryStream(); 
bmp.Save(sm,ImageFormat.GIF); 
下面就看你怎么把内存流里的图片粘帖到word中去了