在ASP编程语言中利用OWC控件来实现图表功能详解

来源：原创发布人：郑州网站建设公司（郑州凯讯）发布日期：2013-11-18

也许您经常见到网上有饼状图、柱状图、折线图等特殊的图形，您是否也有此需求呢？其实，在ASP编程语言里，同样可以制作出比较简单的图表出来，只是在ASP语言里，并没有专用的ASP图表控件，相对某些专用的图表控件来，实现起来要复杂一些。据我们郑州网站建设公司的测试，能用ASP编程语言制作出来的图表主要有饼图，柱状图，折线图等。下面我们郑州网站建设公司就将这三种图表的制作方法逐一说明，并配备插图。根据我们郑州网站建设公司的使用经验，要制作出这些图标，必须首先在本地电脑上安装有OWC10微软的 Office组件等相关OWC控件。关于这些OWC控件的来源，可以从网上或者微软官方网站上下载这个组件，然后在本地电脑上安装一下即可。

一、饼图的制作
图示如下：
网站技术图片

代码如下：
<body>
%
MXX1="tom,john,mike,robot"
MXX2="153,175,198,230"
%>

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 = 14 '设置图表工作区标题内容的大小（单位：磅）
ChartSpace1.ChartSpaceTitle.Font.Underline = c.owcUnderlineStyleSingle '设置下划线属性

'-------设置图例--------------------------------------------
cht.HasLegend = True '指定图表工作区中含有图例
cht.Legend.Font.Size = 14 '其他有关字体项的设置参见设置图表标题部分
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
'------------------饼图（结束）------------------------------------------------
End Sub
</script>
</body>

二、柱状图的制作
图示如下：
网站技术图片

代码如下：
<body>
<%
MXX1="tom,john,mike,robot"
MXX2="153,175,198,230"
%>
<br>

'------------------簇状柱型图（开始）--------------------------------------
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 = 14 '设置图表工作区标题内容的大小（单位：磅）
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 = 10
dl.Font.Color = "green"
dl.Position = c.chLegendPositionRight

'设置纵向数值属性
Set categoryAxis = cht.Axes(c.chAxisPositionBottom)
categoryAxis.Font.Size = 10
'设置分类组属性
Set categoryAxis = cht.Axes(c.chAxisPositionLeft)
categoryAxis.Font.Size = 10
'------------------簇状柱型图（结束）--------------------------------------
End Sub
</script>
</body>

三、折线图的制作
图示如下：
网站技术图片

代码如下：
<body>
<%
'一个产品的销量图
MX1 = "A产品,B产品,C产品,D产品" '数据项目名数组（给出测试数据，实际用的时候从数据库读取用","分隔）
MX2 = "1300,500,200,800" '数据项目值数组

Datestr = "2012-03-24,2012-03-25,2012-03-26,2012-03-27,2012-03-28" '日期

XL1 = "50,100,20,80,89" 'A产品2012-03-24 至 2012-03-28的销量
XL2 = "40,60,20,90,70" 'B产品2012-03-24 至 2012-03-28的销量
XL3 = "20,50,55,25,60" 'C产品2012-03-24 至 2012-03-28的销量
XL4 = "80,20,75,58,100" 'D产品2012-03-24 至 2012-03-28的销量
%>

'------------------折线图----------------------------------------------------------
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 = 12 '其他有关字体项的设置参见设置图表标题部分
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 = 12

'设置分类组属性
Set categoryAxis = cht.Axes(c.chAxisPositionLeft)
categoryAxis.Font.Size = 12

valuearr = split("<%=XL1%>",",")
cht.SeriesCollection(0).SetData c.chDimvalues, c.chDataLiteral, valuearr
Set dl = cht.SeriesCollection(0).DataLabelsCollection.Add '添加图例的数据标记
dl.Hasvalue = True
dl.HasPercentage = False
dl.Font.Size = 9

valuearr = split("<%=XL2%>",",")
cht.SeriesCollection(1).SetData c.chDimvalues, c.chDataLiteral, valuearr
Set dl = cht.SeriesCollection(1).DataLabelsCollection.Add '添加图例的数据标记
dl.Hasvalue = True
dl.HasPercentage = False
dl.Font.Size = 9

valuearr = split("<%=XL3%>",",")
cht.SeriesCollection(2).SetData c.chDimvalues, c.chDataLiteral, valuearr
Set dl = cht.SeriesCollection(2).DataLabelsCollection.Add '添加图例的数据标记
dl.Hasvalue = True
dl.HasPercentage = False
dl.Font.Size = 9

valuearr = split("<%=XL4%>",",")
cht.SeriesCollection(3).SetData c.chDimvalues, c.chDataLiteral, valuearr
Set dl = cht.SeriesCollection(3).DataLabelsCollection.Add '添加图例的数据标记
dl.Hasvalue = True
dl.HasPercentage = False
dl.Font.Size = 9

'------------------折线图（结束）---------------------------------------------------
End Sub
</script>
</body>

上一篇：ASP语言里的几个常用的对象结构的用法简介
下一篇：用ASP和ASP.NET结合实现网站上显示的验证码的生成技术