TeeChartPro.NET使用教程（2022）：如何使用ASP.NET应用程序（下）

接下来继续为大家介绍上一篇文章未讲完的部分&＃xff0c;如何使用ASP.NET 应用程序。

免费的脚本化 ASP 应用程序

在 WebForm 中使用 WebChart 的替代方法是将 TeeChart 用作标准 asp (aspx) 页面中的脚本化“不可见”控件。

TeeChart 可以通过内部 Chart 类在 ASP 中自由编写脚本&＃xff0c;但要利用 TeeChart 事件&＃xff0c;我们建议使用 TChart Windows 窗体组件或 WebChart 控件

将图表添加到脚本

假设使用 TChart&＃xff0c;您需要采取的初始步骤来设置 TeeChart 项目是&＃xff1a;

• 创建新的 ASP.NET Forms 项目。这将创建一个您将用作客户端页面的 WebForm 页面。
• 添加新的WebForm 页面。此页面将不可见&＃xff0c;并将用于处理图表代码服务器端。
• 按照此处和 ASPStreams 示例中突出显示的代码步骤作为如何设置项目的指南。

工艺流程

客户端浏览器页面 (SeriesTypes.aspx) 包含一个图像&＃xff0c;其 IMG 链接是 aspx 服务器脚本 (ShowSeries.aspx)。客户端页面上的提交按钮使用参数化 serverChart 处理所需的变量调用服务器脚本。该按钮将变量作为参数的一部分发送&＃xff0c;以设置客户端页面图表图像的 imageURL&＃xff0c;因此返回基于处理参数的动态图表。

使用 TeeChart 编码

要使用 TeeChart 服务器端进行编码&＃xff0c;请在脚本页面上添加 using 到 TeeChart&＃xff1a;

using Steema.TeeChart;

然后为 TChart 声明一个变量&＃xff0c;并在 Page_Load 事件开始时创建它

private void Page_Load(object sender, System.EventArgs e) { tChart&＃61;new TChart(); /* ...add Series and data, etc ... */ }

图表检索的关键代码元素

图表检索的关键代码组件是&＃xff1a;

客户端“获取”指令。 这可以通过提交按钮或其他方式&＃xff08;例如组合框&＃xff09;启动&＃xff0c;并根据客户端参数从服务器“获取”图表。 图表请求可以作为“传统的 Get url 行发送&＃xff0c;其中参数作为一个 URL 行传递&＃xff0c;或者可以通过 ASP.NET 的“在页面之间传递服务器控制值”来完成。 调用服务器脚本的编码将在 WebForms Code behind 页面中进行。

private void sendInfo() { seriesType&＃61;DropDownList1.Items[DropDownList1.SelectedIndex].ToString(); viewType&＃61;CheckBox1.Checked.ToString(); Image1.ImageUrl&＃61;"http://"&＃43;webServer /*use webserver variable for server*/ &＃43;"/TeeChartForNET/ASPStream/ProcessChart.aspx?seriestype&＃61;" &＃43;seriesType&＃43;"&view&＃61;"&＃43;viewType; }

服务器脚本从客户端接收 GET 请求并运行其 Page_Load 事件。 如果可以创建图表并且接收的参数可用于定义图表的填充方式。 然后将图表呈现为图像并作为流向客户端返回。

private void Page_Load(object sender, System.EventArgs e) { tChart&＃61;new TChart(); tChart.AfterDraw &＃43;&＃61; new Steema.TeeChart.TChart.PaintChartEventHandler(this.tChart_AfterDraw); /* ...add Series and data, etc ... */ //Process Get parameters received from client if (Request.QueryString["view"]&＃61;&＃61;"False") tChart.Aspect.View3D&＃61;false; else tChart.Aspect.View3D&＃61;true; MemoryStream tempStream &＃61; new MemoryStream(); tChart.Export.Image.PNG.Save(tempStream); Response.ContentType&＃61;"Image/PNG"; Response.OutputStream.Write(tempStream.ToArray(),0,(int)tempStream.Length); tempStream.Close(); }

添加事件

通过在图表创建后添加事件&＃xff0c;可以为自由脚本 TeeChart ASP 应用程序添加图表创建事件。

private void Page_Load(object sender, System.EventArgs e) { tChart&＃61;new TChart(); tChart.AfterDraw &＃43;&＃61; new Steema.TeeChart.TChart.PaintChartEventHandler(this.tChart_AfterDraw); /* ...add Series and data, etc ... */ MemoryStream tempStream &＃61; new MemoryStream(); tChart.Export.Image.PNG.Save(tempStream); Response.ContentType&＃61;"Image/PNG"; Response.OutputStream.Write(tempStream.ToArray(),0,(int)tempStream.Length); tempStream.Close(); } private void tChart_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) { string tmpStr&＃61;"Copyright My Organisation "&＃43;DateTime.Now.ToString(); g.TextOut(g.Chart.Width-(int)g.TextWidth(tmpStr)-5,g.Chart.Height-(int)g.TextHeight("H")-3,tmpStr); }

AfterDraw 事件代码将在图表创建时执行&＃xff0c;在这种情况下&＃xff0c;当图表呈现为图像时&＃xff0c;相关消息将包含在图表画布上。 如果您希望在客户端页面图表上使用基于用户鼠标点击的交互式事件&＃xff0c;我们建议您在 WebForm 上使用 WebChart 组件。

安全问题

通过安装程序安装 .NET 的默认 TeeChart 创建的文件夹和 IIS 虚拟文件夹足以访问 TeeChart 中包含的 ASP.NET 示例。 WebForm 应用程序假定在 IIS 中激活会话支持以移动临时图表信息。 可以在 Visual Studio.NET 中修改示例项目以使用“文件”作为临时存储图表的媒介。 在 Windows 2000 中运行良好的测试中。在 Windows 2003 中&＃xff0c;默认安装的附加安全限制限制了使用默认“_chart_temp”文件夹的可能性&＃xff08;临时文件夹的名称和位置是可配置的&＃xff09;。 在 Win2003 服务器中&＃xff0c;系统管理员必须修改安全权限&＃xff0c;以允许相关 ASP.NET 应用程序将临时文件保存到磁盘。

网络图表工具

WebChart 工具可用于从编辑器工具面板添加到 WebChart。 许多非 WebChart 特定的工具可以与 WebChart 一起使用&＃xff0c;除了那些响应鼠标移动的工具&＃xff08;除了下面介绍的 WebChart 工具本身&＃xff09;。

热点工具

该工具以最简单的形式激活数据点鼠标悬停标签&＃xff0c;当鼠标经过一个点时显示。 热点工具也可用于 Winform 图表&＃xff0c;但 WebChart 的操作性质不同&＃xff0c;如此处所述。 WebChart Hotspot Tool 生成与每个数据点关联的地图区域。 可以从以下选项中选择地图操作&＃xff1a;

标记

使用 Style 属性定义标记样式。

Steema.TeeChart.Tools.SeriesHotspot hotspotTool &＃61; ((Steema.TeeChart.Tools.SeriesHotspot)WebChart1.Chart.Tools[0]);

网址

使用 GetHTMLMap 事件设置从数据点调用的 URL。 URL 选项可以通过编辑器设置&＃xff0c;但您必须对事件进行编码以设置正确的 URL。

//init code....
Steema.TeeChart.Tools.SeriesHotspot hotspotTool &＃61; ((Steema.TeeChart.Tools.SeriesHotspot)WebChart1.Chart.Tools[0]); hotspotTool.GetHTMLMap &＃43;&＃61; new Steema.TeeChart.Tools.SeriesHotspotEventHandler(hotspotTool_GetHTMLMap); //event code:
private void hotspotTool_GetHTMLMap(Steema.TeeChart.Tools.SeriesHotspot sender, Steema.TeeChart.Tools.SeriesHotspotEventArgs e)
{ if (CheckBox1.Checked) //open new window? e.PointPolygon.Attributes&＃61;"target&＃61;&＃39;_blank&＃39;"; else e.PointPolygon.Attributes&＃61;"target&＃61;&＃39;_self&＃39;"; tab if (e.Series&＃61;&＃61;WebChart1.Chart.Series[0]) e.PointPolygon.HREF&＃61;"http://" &＃43; TextBox1.Text; //set URL according to textbox text &＃43; TextBox1.Text; //set URL according to textbox text if (e.Series&＃61;&＃61;WebChart1.Chart.Series[1]) e.PointPolygon.HREF&＃61;"http://" &＃43; TextBox2.Text; if (e.Series&＃61;&＃61;WebChart1.Chart.Series[2]) e.PointPolygon.HREF&＃61;"http://" &＃43; TextBox3.Text; &＃43; TextBox3.Text; if (e.Series&＃61;&＃61;WebChart1.Chart.Series[3]) e.PointPolygon.HREF&＃61;"http://" &＃43; TextBox4.Text;
}

脚本

脚本选项可用于处理您可能希望通过 Javascript 添加到图表的任何自定义内容或增值。 选择脚本作为选项TeeChart时&＃xff0c;请选中使用帮助程序脚本的选项&＃xff0c;当前可用&＃xff1a;&＃39;注释&＃39;。 您可以选择不使用 Helperscript 并定义您自己的输出。

protected void Page_Load(object sender, System.EventArgs e)
{ //initialization Chart ch1 &＃61; WebChart1.Chart; Steema.TeeChart.Themes.ColorPalettes.ApplyPalette(ch1, 9); Steema.TeeChart.Tools.SeriesHotspot hotspot1 &＃61; new Steema.TeeChart.Tools.SeriesHotspot(); ch1.Legend.Visible &＃61; false; ch1.Tools.Add(hotspot1); hotspot1.MapAction &＃61; Steema.TeeChart.Styles.MapAction.Script; hotspot1.GetHTMLMap &＃43;&＃61; new Steema.TeeChart.Tools.SeriesHotspotEventHandler(hotspot1_GetHTMLMap); //....etc... more init code
} private void hotspot1_GetHTMLMap(Steema.TeeChart.Tools.SeriesHotspot sender, Steema.TeeChart.Tools.SeriesHotspotEventArgs e)
{ //This example calls a Bar Series but e.Series and e.PointPolygon.ValueIndex could be sent //as arguments for a drilldown query. //The prepared HelperScriptAnnotation text accepts your text as a variable for the Annotation //In the following case it calls an aspx script to generate and return a Chart as an image e.PointPolygon.Attributes&＃61;String.Format(Texts.HelperScriptAnnotation); //The annotation could, alternatively, present text in the mouseover hint, eg.: //e.PointPolygon.Attributes&＃61;String.Format(Steema.TeeChart.Texts.HelperScriptAnnotation,"hello world.");
}

滚动工具

ScrollTool 将滚动条添加到 WebChart 的底部。 您可以设置图表的可见部分大小和起始位置。 图表也是可拖动的&＃xff0c;尽管该功能可能被停用。 ScrollTool 可以与 Hotspot Tool 结合使用。

使用编辑器添加 ScrollTool 会自动将 Chart 设置为 2D 并移动下 Axis 以为滚动条留出空间。 滚动条在设计时不可见。

将 ViewSegmentSize 和 StartPosition 与 SegmentViewUnits 结合使用来设置可滚动大小。

Steema.TeeChart.Tools.ScrollTool scrollTool &＃61; ((Steema.TeeChart.Tools.ScrollTool)WebChart1.Chart.Tools[0]);
scrollTool.StartPosition &＃61; 30;
scrollTool.SegmentViewUnits &＃61; Steema.TeeChart.Tools.ScrollToolViewUnit.percent;
scrollTool.ViewSegmentSize &＃61; 20;

缩放工具

ZoomTool 允许选择要处理的图表的子区域以进行缩放。 可以通过鼠标在图表区域上拖动来选择该区域&＃xff0c;缩放坐标返回到服务器以创建一个缩放区域。 该区域可以通过在相反方向拖动来取消缩放。

要使用 ZoomTool&＃xff0c;您应该将以下方法添加到您的页面代码中。

private void CheckZoom(WebChart wChart)
{ ArrayList zoomedState&＃61;(ArrayList)Session[wChart.ID&＃43;"Zoomed"]; zoomedState&＃61;((Steema.TeeChart.Tools.ZoomTool)wChart.Chart.Tools[0]).SetCurrentZoom(Request, zoomedState); if (zoomedState&＃61;&＃61;null) Session.Remove(wChart.ID&＃43;"Zoomed"); else Session.Add(wChart.ID&＃43;"Zoomed",zoomedState);
}

或 Page.Cache&＃xff1a;

{ ArrayList zoomedState &＃61; (ArrayList)Page.Cache[wChart.ID &＃43; "Zoomed"]; zoomedState &＃61; ((Steema.TeeChart.Tools.ZoomTool)wChart.Chart.Tools[0]).SetCurrentZoom(Request, zoomedState); if (zoomedState &＃61;&＃61; null) Page.Cache.Remove(wChart.ID &＃43; "Zoomed"); else Page.Cache.Add(wChart.ID &＃43; "Zoomed", zoomedState);
}

窗口加载事件

将缩放或滚动工具添加到 WebChart 时&＃xff0c;需要使用 Window.onload 事件来初始化工具的特征。 如果您需要根据自己的需要进一步使用 onload 事件&＃xff0c;请在页面中添加一个名为 windowOnload 的新函数并将您的代码放在那里。