XtraCharts > 示例 > 如何： 使用 WebChartControl 的客户端模型

本指南演示了如何使用 WebChartControl 的客户端 API。 特别是说明了如何把点坐标转换为图象坐标，并在客户端显示。

要在客户端上获得图像坐标名义下的点坐标，则执行下列操作。

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

  2. 把一个 WebChartControl 拖放到页面上，并启用它的 WebChartControl.EnableClientSideAPI 和 WebChartControl.EnableClientSidePointToDiagram 属性。

    把系列添加到图表。 在本例中，我们将使用一个 样式 系列，其中它的 SeriesBase.ArgumentScaleType 参数刻度类型是 日期时间。 因此，对于 X 轴，把 AxisBase.DateTimeMeasureUnit 属性设置为 Millisecond、把 AxisBase.DateTimeGridAlignment 设置为 Month。 然后图表的外观就如同下面所示的那样。

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

    同时，从 DX.10.2: Common Controls 工具箱标签页中，拖放两个 ASPxLabel 控件到面板中。 并且分别把它们的 ClientInstanceName 属性设置为 lblArgument 和 lblValue。

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

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

    JScriptCopyCode image复制代码
    function(s, e) {
    var chart = s.GetChart();
    var coord = chart.diagram.PointToDiagram(e.x, e.y);

    lblArgument.SetText(coord.dateTimeArgument);
    lblValue.SetText(Math.round(coord.numericalValue*100)/100);
}

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


以类似的方式，还可以获取系列的图像坐标 (例如 折线图)。 在 DevExpress 代码中心数据库中，有可用的在线示例项目，链接是 如何： 使用 WebChartControl 的客户端模型。

Expand image参阅