当前位置导航:炫浪网>>网络学院>>网页制作>>ASP教程

ASP中利用OWC控件实现图表功能详解

在ASP中利用OWC(Office Web Components)控件可轻松实现各种图表功能,如饼图,簇状柱型图,折线图等。
  
  在下面的代码中我详细的给出了饼图,簇状柱型图,折线图的使用方法。OWC的更多功能,属性可参加MSOWCVBA.chm帮助文件(在office 2000的文件夹下大家自己找)。
  
  testOWC.asp
  
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <title>ASP中利用OWC控件实现图表功能详解</title>
  </head>
  <body>
  <%
  '下面测试的是一个产品销量图
  MX1 = "A产品,B产品,C产品,D产品" '数据项目名数组(给出测试数据,实际用的时候从数据库读取用","分隔)
  MX2 = "50,60,20,80"   '数据项目值数组
  Datestr = "2005-3-24,2005-3-25,2005-3-26,2005-3-27,2005-3-28"  '日期
  SQARXLstr = "50,100,20,80,89" 'A产品2005-3-24 至 2005-3-28的销量
  SQARXLstr = SQARXLstr & "," & "40,60,20,90,70" 'B产品2005-3-24 至 2005-3-28的销量
  SQARXLstr = SQARXLstr & "," & "20,50,55,25,60" 'C产品2005-3-24 至 2005-3-28的销量
  SQARXLstr = SQARXLstr & "," & "80,20,75,58,100" 'D产品2005-3-24 至 2005-3-28的销量
  %>
  <br>
  <center><object id="ChartSpace1" classid="CLSID:0002E500-0000-0000-C000-000000000046" style="width:95%;height:400"></object></center>
  <br>
  <center><object id="ChartSpace2" classid="CLSID:0002E500-0000-0000-C000-000000000046" style="width:95%;height:400"></object></center>
  <br>
  <center><object id="ChartSpace3" classid="CLSID:0002E500-0000-0000-C000-000000000046" style="width:95%;height:400"></object></center>
  
  <script language="vbscript">
  Sub Window_OnLoad()
  '------------------饼图---------------------
  '为数据赋值
  categories = split("<%=MX1%>",",") '数据项目名数组
  values = split("<%=MX2%>",",") '数据项目值数组
  
  Set cht = ChartSpace1.Charts.Add '添加一个图标对象
  Set c = ChartSpace1.Constants '返回一个对象,此对象允许脚本用户使用已命名的常量。
  cht.Type = c.chChartTypePie  '设置图表类型为饼图
  
  '-------设置图表标题------------------------
  ChartSpace1.HasChartSpaceTitle = True   '指定图表工作区中包含标题
  ChartSpace1.ChartSpaceTitle.Caption = "饼状图"  '设置图表工作区标题内容
  '有关字体的设置
  ChartSpace1.ChartSpaceTitle.Font.Bold = True  '设置图表工作区标题内容是否粗体
  ChartSpace1.ChartSpaceTitle.Font.Color = "blue"  '设置图表工作区标题的颜色
  ChartSpace1.ChartSpaceTitle.Font.Italic = False  '设置图表工作区标题是否为斜体
  ChartSpace1.ChartSpaceTitle.Font.Name = "隶书"  '设置图表工作区标题内容的字体
  ChartSpace1.ChartSpaceTitle.Font.Size = 18   '设置图表工作区标题内容的大小(单位:磅)
  ChartSpace1.ChartSpaceTitle.Font.Underline = c.owcUnderlineStyleSingle '设置下划线属性
  
  '-------设置图例----------------------------
  cht.HasLegend = True     '指定图表工作区中含有图例
  cht.Legend.Font.Size = 9     '其他有关字体项的设置参见设置图表标题部分
  cht.Legend.Position = c.chLegendPositionRight  '设置图例对其方式
  
  cht.SetData c.chDimCategories, c.chDataLiteral, categories
  cht.SeriesCollection(0).SetData c.chDimValues, c.chDataLiteral, values
  
  Set dl = cht.SeriesCollection(0).DataLabelsCollection.Add '添加图例的数据标记
  dl.HasValue = False
  dl.HasPercentage = True
  dl.Font.Size = 11
  '------------------饼图(结束)--------------
  
  '------------------簇状柱型图(开始)--------
  Set cht = ChartSpace2.Charts.Add '添加一个图标对象
  Set c = ChartSpace2.Constants  '返回一个对象,此对象允许脚本用户使用已命名的常量。
  cht.Type = c.chChartTypeColumnClustered '设置图表类型为折线图
  '-------设置图表标题------------------------
  ChartSpace2.HasChartSpaceTitle = True   '指定图表工作区中包含标题
  ChartSpace2.ChartSpaceTitle.Caption = "柱状图"  '设置图表工作区标题内容
  '有关字体的设置
  ChartSpace2.ChartSpaceTitle.Font.Bold = True  '设置图表工作区标题内容是否粗体
  ChartSpace2.ChartSpaceTitle.Font.Color = "blue"  '设置图表工作区标题的颜色
  ChartSpace2.ChartSpaceTitle.Font.Italic = False  '设置图表工作区标题是否为斜体
  ChartSpace2.ChartSpaceTitle.Font.Name = "隶书"  '设置图表工作区标题内容的字体
  ChartSpace2.ChartSpaceTitle.Font.Size = 18   '设置图表工作区标题内容的大小(单位:磅)
  ChartSpace2.ChartSpaceTitle.Font.Underline = c.owcUnderlineStyleSingle '设置下划线属性
  
  cht.SetData c.chDimCategories, c.chDataLiteral, categories '横项(分类轴)
  cht.SeriesCollection(0).SetData c.chDimValues, c.chDataLiteral, values
  Set dl = cht.SeriesCollection(0).DataLabelsCollection.Add '添加图例的数据标记
  dl.HasValue = True
  dl.HasPercentage = False
  dl.Font.Size = 9
  dl.Font.Color = "red"
  dl.Position = c.chLegendPositionRight
  
  '设置纵向数值属性
  Set categoryAxis = cht.Axes(c.chAxisPositionBottom)
  categoryAxis.Font.Size = 9
  '设置分类组属性
  Set categoryAxis = cht.Axes(c.chAxisPositionLeft)
  categoryAxis.Font.Size = 9
  '------------------簇状柱型图(结束)-----------
  
  '------------------折线图-----------------------
  SParr = split("<%=MX1%>",",")
  Datearr = split("<%=Datestr%>",",")
  
  Set cht = ChartSpace3.Charts.Add '添加一个图标对象
  Set c = ChartSpace3.Constants  '返回一个对象,此对象允许脚本用户使用已命名的常量。
  cht.Type = c.chChartTypeLineMarkers '设置图表类型为折线图
  
  '-------设置图表标题----------------------------------------
  ChartSpace3.HasChartSpaceTitle = True   '指定图表工作区中包含标题
  ChartSpace3.ChartSpaceTitle.Caption = "日销量折线图" '设置图表工作区标题内容
  '有关字体的设置
  ChartSpace3.ChartSpaceTitle.Font.Bold = True  '设置图表工作区标题内容是否粗体
  ChartSpace3.ChartSpaceTitle.Font.Color = "blue"  '设置图表工作区标题的颜色
  ChartSpace3.ChartSpaceTitle.Font.Italic = False  '设置图表工作区标题是否为斜体
  ChartSpace3.ChartSpaceTitle.Font.Name = "隶书"  '设置图表工作区标题内容的字体
  ChartSpace3.ChartSpaceTitle.Font.Size = 18   '设置图表工作区标题内容的大小(单位:磅)
  ChartSpace3.ChartSpaceTitle.Font.Underline = c.owcUnderlineStyleSingle '设置下划线属性
  
  '-------设置图例----------------------------
  cht.HasLegend = True     '指定图表工作区中含有图例
  cht.Legend.Font.Size = 9     '其他有关字体项的设置参见设置图表标题部分
  cht.Legend.Position = c.chLegendPositionBottom  '设置图例对其方式
  
  cht.SetData c.chDimSeriesNames, c.chDataLiteral, SParr '系列
  cht.SetData c.chDimCategories, c.chDataLiteral, Datearr '横项(分类轴)
  
  '设置纵向数值属性
  Set categoryAxis = cht.Axes(c.chAxisPositionBottom)
  categoryAxis.Font.Size = 9
  
  '设置分类组属性
  Set categoryAxis = cht.Axes(c.chAxisPositionLeft)
  categoryAxis.Font.Size = 9
  
  values = split("<%=SQARXLstr%>",",")
  for i = 0 to ubound(SParr)
  valuetemp = ""
  for j = i*(ubound(Datearr)+1) to (i+1)*(ubound(Datearr)+1)-1 '按天读取数据
  valuetemp = valuetemp & "," & values(j)
  next
  valuearr = split(mid(valuetemp,2),",")
  cht.SeriesCollection(i).SetData c.chDimValues, c.chDataLiteral, valuearr
  Set dl = cht.SeriesCollection(i).DataLabelsCollection.Add '添加图例的数据标记
  dl.HasValue = True
  dl.HasPercentage = False
  dl.Font.Size = 9
  next
  '------------------折线图(结束)-------------
  End Sub
  </script>
  </body>
  </html>
相关内容
赞助商链接