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

被折叠的 条评论
为什么被折叠?



