随着互联网技术的发展,用户对于网页交互体验的要求越来越高。AJAX(Asynchronous JavaScript and XML)技术的出现,使得网页可以在不刷新整个页面的情况下,与服务器进行数据交换和更新,从而提供更加流畅和快速的用户体验。在众多知名网站如Google、Flickr和Amazon中,AJAX技术已经被广泛应用。微软也认识到了AJAX的重要性,推出了Atlas项目,作为ASP.NET 2.0的扩展,旨在简化AJAX功能的实现。此外,微软自身也推出了多个集成了AJAX技术的网站,为用户提供了更加响应迅速和友好的用户界面。
Dundas ChartforASP.NET利用AJAX技术实现了以下内置功能:
此外,还提供了事件来构建自定义的图表相关功能。这允许在不刷新整个页面的情况下更新图表或网页上的元素,为提供了极大的灵活性:
除了这些功能,还可以编写自己的方法来在客户端处理事件,而无需回传,使用现有的架构。由于交互功能基于AJAX,它们支持广泛的浏览器,因为对浏览器没有要求。
使用Dundas Chart for ASP.NET,启用缩放和滚动变得前所未有的简单。例如,以下代码行启用了X轴的缩放:
C# Chart1.ChartAreas[0].CursorX.UserEnabled = true;
图表自动启用和禁用AJAX,因此如果启用了如缩放这样的交互功能,图表将自动采取必要的步骤来启用AJAX,以便图表工作。
一旦选择了一个区域,图表将自动放大并显示这个区域以及一个交互式滚动条。图表的交互式滚动条通过创建一个更加互动和直观的环境,提高了用户体验。
Dundas Chartfor ASP.NET包括一个完全可定制的AJAX启用的工具栏。
工具栏允许移除、更改和添加命令,以及上下文菜单。例如,要更改属性命令图标,可以使用以下代码:
C# //
找到"属性"命令
Command cmdProperties = chart1.UI.Commands.FindCommand(ChartCommandType.Properties);
// 更改"属性"命令图像、文本和描述
cmdProperties.ImageTranspColor = Color.White;
cmdProperties.Image = "face.bmp";
cmdProperties.Text = "Modified Properties...";
cmdProperties.Description = "Modified description of the Properties command.";
结果如下工具栏:
如果属性图标被点击,将显示一个交互式对话框,允许用户更改图表的属性。
除了工具栏,图表还包括一个上下文菜单。上下文菜单是当图表被右键点击时出现的菜单。这个菜单是完全可定制的,并且允许另一种方式积极地与图表互动。
向上下文菜单添加命令与向工具栏添加命令非常相似,可以按照以下方式完成:
C# //
向集合中添加一个用户定义的命令
Command userCommand = new Command();
userCommand.CommandID = 300;
userCommand.Text = "User Command Group";
userCommand.Image = "UserCommandImage.gif";
Chart1.UI.Commands.Add(userCommand);
// 向上下文菜单项集合中添加一个用户定义的命令
Chart1.UI.ContextMenu.Items.Add(userCommand);
Dundas ChartforASP.NET中的新CallbackManager类公开了几个成员,使得在图表的任何元素上实现回调变得容易。要设置图表使用回调,使用GetCallbackEventReference函数和图表中的Callback事件。
C# protected void Page_Load(object sender, EventArgs e)
{
foreach (Dundas.Charting.WebControl.DataPoint p in Chart1.Series[0].Points)
{
p.MapAreaAttributes = "onclick=\"" + Chart1.CallbackManager.GetCallbackEventReference("PointClick", "#VALY") + "\"";
}
}
protected void Chart1_Callback(object sender, CommandEventArgs e)
{
if (e.CommandName == "PointClick")
{
string argumentString = e.CommandArgument.ToString();
this.Label1.Text = "Point's Y-value: " + argumentString;
Chart1.CallbackManager.UpdateClientControl(this.Label1);
}
}
上述示例为每个DataPoint设置了回调,使用GetCallbackEventReference返回点击点的y值(#VALY)。图表的Callback事件自动设置为接收图表创建的所有回调。要识别哪个图表元素被点击,必须将CommandName与用于识别的原始字符串进行比较,本例中为PointClick。一旦确定是由DataPoint的点击引发的回调,函数UpdateClientControl然后被用来通知图表在客户端更新Label1。注意Label1是一个标准的.NET Label。