XtraCharts > 示例 > 如何： 使用 ASPxPopupControl 控件在 Web 图表上显示自定义数据

这个示例展示了当鼠标悬停在系列点上时，如何显示从 WebChartControl 的数据源获得的自定义数据。 可以使用 ASPxPopupControl 来完成此任务，其中放置有 ASPxCallbackPanel，以便于在 callbacks 期间获得数据。

CodeCentralShow Me

在 DevExpress Code Central 数据库中可以找到完整的示例项目，网址是 http://www.devexpress.com/example=E258。 取决于目标平台类型 (ASP.NET、WinForms 等)，可以在线运行本示例，或者下载自动可执行的示例。

要实现 Web 图表的工具提示，则执行下列操作。

  1. 新建一个或者打开现有的 ASP.NET Web 应用程序 (Visual Studio 2005、2008 或 2010)。

  2. 把图表拖放到 Web 页面上，并且 把它绑定到数据源。

  3. 从 DX.10.2: Navigation & Layout 工具箱标签页中，把 ASPxPopupControl 控件拖放到页面上。

    把它的 ASPxPopupControl.ClientInstanceName 属性设置为 pc。

  4. 然后，从相同的工具箱标签页中，把 ASPxCallbackPanel 控件拖放到 ASPxPopupControl1 中。

    把它的 ASPxCallbackPanel.ClientInstanceName 属性设置为 cbp。

  5. 现在，切换到 DX.10.2: Common Controls 工具箱标签页，并把两个 ASPxLabel 控件放置在 ASPxCallbackPanel1 中。

  6. 现在，选中 ASPxCallbackPanel1，并单击它的智能标记。 在操作列表中，单击 Client-Side Events(客户端事件)... 链接。

    在被调用的对话框中，以下列方式接管 CallbackClientSideEvents.EndCallback 事件。

    JScriptCopyCode image复制代码
    function(s, e) {
    pc.SetHeaderText(s.cpHeaderText);
    pc.ShowAtPos(pcX, pcY);
}

  7. 以类似的方式，单击图表的智能标记，并在操作列表中，单击 Client-Side Events(客户端事件)... 链接。

    在被调用的对话框中，以下列方式接管 ChartClientSideEvents.ObjectSelected 事件。

    JScriptCopyCode image复制代码
    function(s, e) {
    if (e.hitInfo.inSeries) {
        var obj = e.additionalHitObject;
        if (obj != null){
            pcX = e.absoluteX;
            pcY = e.absoluteY;
            cbp.PerformCallback(obj.argument);
        }
    }
}

  8. 现在，以下列方式接管 ASPxCallbackPanel.Callback 事件。

    C#CopyCode image复制代码
    using System;
using System.Data;
using System.Web.UI;
using System.Collections;
using DevExpress.Web.ASPxClasses;
// ...

string headerText = null;

protected void ASPxCallbackPanel1_Callback(object sender, CallbackEventArgsBase e) {
    String param = e.Parameter.Replace("'", "''");
    AccessDataSource1.SelectCommand = 
        "SELECT * FROM [Products] WHERE ProductName = '" + param + "'";
    IEnumerable data = AccessDataSource1.Select(DataSourceSelectArguments.Empty);
    foreach (DataRowView row in data) {
        ASPxLabel1.Text = "Price: " + row["UnitPrice"].ToString();
        ASPxLabel2.Text = "Units in Stock: " + row["UnitsInStock"].ToString();
        headerText = row["ProductName"].ToString();
        break;
    }
}
    Visual BasicCopyCode image复制代码
    Imports System
Imports System.Data
Imports System.Web.UI
Imports System.Collections
Imports DevExpress.Web.ASPxClasses
' ...

Private headerText As String = Nothing

Protected Sub ASPxCallbackPanel1_Callback(ByVal source As Object, _ 
ByVal e As CallbackEventArgsBase)
    AccessDataSource1.SelectCommand = _ 
        "SELECT * FROM [Products] WHERE ProductName = '" & e.Parameter & "'"
    Dim data As IEnumerable = AccessDataSource1.Select(DataSourceSelectArguments.Empty)
    For Each row As DataRowView In data
        ASPxLabel1.Text = "Price: " & row("UnitPrice").ToString()
        ASPxLabel2.Text = "Units in Stock: " & row("UnitsInStock").ToString()
        headerText = row("ProductName").ToString()
        Exit For
    Next row
End Sub

  9. 并且在 ASPxCallbackPanel.CustomJSProperties 事件处理程序中编写下列代码。

    C#CopyCode image复制代码
    protected void ASPxCallbackPanel1_CustomJSProperties(object sender, 
    CustomJSPropertiesEventArgs e) {
    if (headerText != null)
        e.Properties.Add("cpHeaderText", headerText);
}
    Visual BasicCopyCode image复制代码
    Protected Sub ASPxCallbackPanel1_CustomJSProperties(ByVal sender As Object, _ 
ByVal e As CustomJSPropertiesEventArgs)
    If Not headerText Is Nothing Then
        e.Properties.Add("cpHeaderText", headerText)
    End If
End Sub

运行此应用程序，并查看结果。

Expand image参阅