OWC绘图控件研究(2)

本文介绍了一种通过Office Web Components (OWC) 在网页上生成数据图表的方法。利用OWC11.ChartSpace组件,结合JavaScript脚本,可以实现动态图表的创建与展示。示例代码展示了如何初始化图表、设置图表样式、添加数据系列等关键步骤。

在前台中提交给OWC一定规则的数据后,可通过脚本生成数据图表,多话不说,前台代码如下:

<%...@ControlLanguage="C#"AutoEventWireup="true"CodeFile="ViewImage.ascx.cs"Inherits="web_CarsManage_Controls_ViewImage"%>

<scriptlanguage="javascript">...
<!--
functionIni()
...{
//
//
document.form1.all["tbFrom"].readOnly=true;
//
document.form1.all["tbTo"].readOnly=true;

varchart=document.getElementById("Chart");//newActiveXObject("OWC11.ChartSpace.11");
varc=chart.Constants;
if(chart==null)
...{
alert(
"您没有安装Office!");
}

chart.Clear();
varm_Chart=chart.Charts.Add(0);
//m_Chart.PlotArea.Interior.SetOneColorGradient(c.chGradientVariantStart,c.chGradientVariantStart,0.15,"Silver")

m_Chart.HasLegend
=true

//alert('<%=driverList.Count%>');
varj=<%=driverList.Count%>
for(vari=0;i<j;i++)
...{
alert(i.toString());
}

m_Chart.HasTitle
=true
m_Chart.Title.Caption
="油耗量统计分析";
m_Chart.Axes(
0).HasTitle=true;
m_Chart.Axes(
0).Title.Caption="月份";
m_Chart.Axes(
1).HasTitle=true;
m_Chart.Axes(
1).Title.Caption="油耗量";

m_Chart.type
=0;

varaCats=["中国","美国","澳大利亚"];//["1","2","3","4","5","6","7","8","9","10","11","12"];
varaVals=[100,120,128]//<%=OilTotal.ToString()%>;//<%=OilTotal%>;;

varoSer=m_Chart.SeriesCollection.Add(0);
oSer.SetData(c.chDimSeriesNames,
-1,"标准油耗");
oSer.SetData(c.chDimCategories,
-1,aCats);
oSer.SetData(c.chDimValues,
-1,aVals);

//varoSer1=m_Chart.SeriesCollection.Add(0);
varaVals1=[123,124,145];//<%=OilTotal%>;//[100,120,128];
varoser=m_Chart.SeriesCollection.Add(1);
oser.SetData(c.chDimSeriesNames,
-1,"图例1");
oser.SetData(c.chDimCategories,
-1,aCats);
oser.SetData(c.chDimValues,
-1,aVals1);

chart.AllowPropertyToolbox
=true;
chart.DisplayToolbar
=true;

}


-->
</script>

<bodyonload="javascript:Ini()">
<tablewidth="100%">
<tr>
<td>
<tablewidth="100%">
<tr>
<tdstyle="width:250px;text-align:right">年份:</td>
<tdstyle="width:85px">
<asp:DropDownListID="ddlYear"runat="server"Width="130px">
</asp:DropDownList>
</td>
<tdstyle="width:36px;text-align:right"align="right">车号:</td>
<tdstyle="width:100px">
<asp:DropDownListID="ddlCnumber"runat="server"Width="130px">
<asp:ListItem>--请选择车号</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<tdstyle="width:250px;height:116px;"align="right">驾驶员:</td>
<tdstyle="width:85px;height:116px;">
<asp:ListBoxID="lstName"runat="server"Height="130px"Width="130px"></asp:ListBox>
</td>
<tdstyle="width:36px;height:116px;text-align:center;"align="right">
<tablestyle="width:1px">
<tr>
<tdstyle="width:21px">
<asp:ButtonID="btnSelectAll"runat="server"OnClick="btnSelectAll_Click"Text=">>"CssClass="button_skin"
Width
="30px"/></td>
</tr>
<tr>
<tdstyle="width:21px">
<asp:ButtonID="btnSelectSingle"runat="server"OnClick="btnSelectSingle_Click"Text=">"CssClass="button_skin"
Width
="30px"/></td>
</tr>
<tr>
<tdstyle="width:21px">
<asp:ButtonID="btnRemoveSingle"runat="server"OnClick="btnRemoveSingle_Click"Text="<"CssClass="button_skin"
Width
="30px"/></td>
</tr>
<tr>
<tdstyle="width:21px;height:26px">
<asp:ButtonID="btnRemoveAll"runat="server"OnClick="btnRemoveAll_Click"Text="<<"CssClass="button_skin"
Width
="30px"/></td>
</tr>
</table>
</td>
<tdstyle="width:380px;height:116px;"><asp:ListBoxID="lstSelectName"runat="server"Height="128px"Width="130px"></asp:ListBox></td>
</tr>
<tr>
<tdalign="center"colspan="4">
<asp:ButtonID="btnOK"runat="server"OnClick="btnOK_Click"Text="统计分析"CssClass="button_skin"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<tdcolspan="1"rowspan="3"style="width:730px;text-align:center">
<asp:ImageID="Image1"runat="server"Visible="false"/><objectid="Chart"name="Chart"codebase="http://www.smnpc.cn/bin/OWC11.DLL#version=11,0,6555,0"
classid
="clsid:0002E55D-0000-0000-C000-000000000046"progid="OWC11.ChartSpace.11"></object></td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<inputid="Button1"type="button"value="button"onclick="returnButton1_onclick()"/>
</body>
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值