AJAX 功能为 Dundas Chart 提供交互性和缩放/滚动功能

什么是 AJAX？

AJAX（异步 JavaScript 和 XML）使您无需将整个页面发送回服务器即可刷新网页的一部分。AJAX 式开发被 Google、Flickr 和 Amazon 等知名网站使用，并因其能够提供满足当今组织需求的丰富、加载快速、用户友好的应用程序，而在 ASP.NET 开发社区中迅速普及。

认识到 AJAX 的重要性，微软最近推出了 Atlas 项目，这是 ASP.NET 2.0 的一个扩展，旨在简化 AJAX 功能的实现。此外，微软已经推出了自己的网站，这些网站采用了 AJAX 技术，并为最终用户提供了增强的、响应迅速的用户界面。

Dundas Chart 中的 AJAX

Dundas Chart for ASP.NET 使用 AJAX 来实现以下内置功能：

• 内部和外部工具栏。
• 上下文菜单。
• 属性对话框。
• 滚动。
• 缩放。

此外，还提供了事件来构建自定义的图表相关功能。这使您无需刷新整个页面即可更新图表或网页上的元素，从而为您提供了巨大的灵活性，可以：

• 创建实时图表。
• 弹出窗口并显示详细的图表信息。
• 展开和折叠图例、图表区域、标签等。
• 自定义定位注释。
• 显示或隐藏图表元素。

除了这些功能，您还可以使用我们现有的架构编写自己的方法来在客户端处理事件，而无需回发。由于交互功能基于 AJAX，因此它们受到各种浏览器的支持，因为对浏览器没有特定要求。

单击此处下载 Dundas Chart for ASP.NET 的完整评估版。.

缩放和滚动

使用 Dundas Chart for ASP.NET，启用缩放和滚动比以往任何时候都更容易。例如，以下代码行启用了 X 轴上的缩放。

Chart1.ChartAreas[0].CursorX.UserEnabled = true;

图表会自动根据需要启用和禁用 AJAX。因此，如果启用了缩放等交互功能，图表将自动采取必要步骤启用 AJAX，以使您的图表正常工作。

图 1：交互式选择图表区域

选择一个区域后，图表会自动放大并显示该区域以及交互式滚动条。

图 2：缩放后的交互式滚动条

图表的交互式滚动条通过创建更具交互性和直观性的环境来改善用户体验。

要查看缩放和滚动的在线示例，请单击此处。

用户界面

Dundas Chart for ASP.NET 包含一个完全可自定义的、支持 AJAX 的工具栏。

图 3：默认工具栏

该工具栏允许您删除、更改和添加命令，也可以用于上下文菜单。例如，要更改“属性”命令的图标，可以使用以下代码：

// Find the "Properties" command
Command cmdProperties =
chart1.UI.Commands.FindCommand(ChartCommandType.Properties);

// Change "Properties" command image, text and description
cmdProperties.ImageTranspColor = Color.White;
cmdProperties.Image = "face.bmp";
cmdProperties.Text = "Modified Properties...";
cmdProperties.Description = 
  "Modified description of the Properties command.";

结果是以下工具栏：

图 4：已更改“属性”命令图标的工具栏

从工具栏中删除项目也很简单，也可以做到。例如，要从工具栏和上下文菜单中删除饼图类型，您只需编写以下代码：

// Find the Pie Chart command button in the chart types
Command command = 
  chart1.UI.Commands.FindCommand(ChartCommandType.SelectChartPie);
// Set the visibility of this button to false
command.Visible = false;

如果单击“属性”图标，将显示一个交互式对话框，允许用户更改图表的属性。

图 5：属性窗口

除了工具栏，图表还包含一个上下文菜单。上下文菜单是在右键单击图表时出现的菜单。此菜单是完全可自定义的，并提供了另一种与图表进行主动交互的方式。

图 6：上下文菜单

向上下文菜单添加命令与向工具栏添加命令非常相似，可以按以下方式进行：

// Add a user defined command into the collection
Command userCommand = new Command();
userCommand.CommandID = 300;
userCommand.Text = "User Command Group";
userCommand.Image = "UserCommandImage.gif";
Chart1.UI.Commands.Add(userCommand);

// Add a user defined command into the context menu item collection
Chart1.UI.ContextMenu.Items.Add(userCommand);

要查看交互式用户界面功能的在线示例，请单击此处。

客户端回调

Dundas Chart for ASP.NET 中的新 `CallbackManager` 类公开了多个成员，可以轻松地在图表内的任何元素上实现回调。要设置图表以使用回调，将使用 `GetCallbackEventReference` 函数和图表内的 `Callback` 事件。

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`，它会返回单击的点（`#VALY`）的 y 值。图表的 `Callback` 事件会自动设置为接收图表创建的所有回调。要识别是图表的哪个元素被单击，必须将 `CommandName` 与用于标识的原始字符串进行比较，在本例中为 `PointClick`。一旦识别为单击 `DataPoint` 引起的回调，然后使用 `UpdateClientControl` 函数通知图表更新客户端的 `Label1`。请注意，`Label1` 是标准的 .NET `Label`。

由于这一切都是在服务器端的 C# 代码中完成的，因此无需直接编写任何 JavaScript，也无需深入了解回调的工作原理；图表会为您处理所有细节。

结论

Dundas Chart for ASP.NET 的集成 AJAX 功能允许开发人员快速创建交互式图表。用户期望更流畅的体验，无需等待回发，因此 Web 上的交互性正成为一项重要功能，Dundas Software 致力于让这项工作变得轻松。

单击此处下载 Dundas Chart for ASP.NET 的完整评估版。.

*注意：AJAX 功能仅在 Dundas Chart for ASP.NET v5.5、VS2005 中可用。

**Google、Amazon、Flickr 和 Microsoft 是其各自组织在美国和/或其他国家的注册商标。