Dev系列控件之XtraChart高级应用(模拟flash鼠标移动，点击实现相关信息提示)

最近老有园友问能否实现鼠标移动显示点的坐标以及点击chart的点进行其他一些功能实现，类似flash中的鼠标移动提示信息等等。这里特总结共享代码。

Dev对xtrachart绘制的图形的各个元素如点，线，视图，坐标，标题等都定义为各种类型。我们可以根据这些类型来判断哪些是我们需要进行操作的元素。另外，我们可以根据dev设置的一套特有js方法，这些Js方法能实现对整个页面所有DOM元素的加载客户端事件，得到窗体元素的属性等等。这里我们选用mousemove事件来实现坐标的显现，通过chart自带的对象选择ObjectSelect事件来实现点击时提示数据点的相关信息,信息框的呈现由dev的popcontrol来实现。

aspx页面：

table border="0" cellpadding="0" cellspacing="0" style="height: 268px;"><tr><td valign="top">
        <dxchartsui:WebChartControl ID="WebChartControl1" runat="server" Height="400px" ClientInstanceName="chart" 
            Width="600px" OnObjectSelected="WebChartControl1_ObjectSelected">
            <SeriesTemplate LabelTypeName="SideBySideBarSeriesLabel" 
                PointOptionsTypeName="PointOptions" 
                SeriesViewTypeName="SideBySideBarSeriesView">
                <View HiddenSerializableString="to be serialized">
                </View>
                <Label HiddenSerializableString="to be serialized" LineVisible="True" 
                    OverlappingOptionsTypeName="OverlappingOptions">
                    <FillStyle FillOptionsTypeName="SolidFillOptions">
                        <Options HiddenSerializableString="to be serialized" />
                    </FillStyle>
                </Label>
                <PointOptions HiddenSerializableString="to be serialized">
                </PointOptions>
                <LegendPointOptions HiddenSerializableString="to be serialized">
                </LegendPointOptions>
            </SeriesTemplate>
            <FillStyle FillOptionsTypeName="SolidFillOptions">
                <Options HiddenSerializableString="to be serialized" />
            </FillStyle>
            <ClientSideEvents ObjectHotTracked="function(s, e) {HotTracked(s,e);       
 }" ObjectSelected="function(s, e) { onObjectSelect(s,e);} " />

        </dxchartsui:WebChartControl>
   </td>
    </tr>
    </table>
    </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <dxpc:ASPxPopupControl ID="ASPxPopupControl1" runat="server" ClientInstanceName="ToolTip" EnableAnimation="False" Height="1px" ShowHeader="False" Width="1px" CloseAction="None" EnableHotTrack="False" PopupHorizontalAlign="Center" PopupVerticalAlign="TopSides">
    <ContentStyle>
        <Paddings Padding="0px" />
    </ContentStyle>
</dxpc:ASPxPopupControl>
    <dxpc:ASPxPopupControl ID="ASPxPopupControl2" runat="server" 
        ClientInstanceName="ClickTip" EnableAnimation="False" Height="1px" 
        ShowHeader="False" Width="1px" EnableHotTrack="False" 
        PopupHorizontalAlign="Center" PopupVerticalAlign="TopSides">
    <ContentStyle>
        <Paddings Padding="0px" />
    </ContentStyle>
    <ContentCollection>
                 <dxpc:PopupControlContentControl ID="PopupControlContentControl1" runat="server">
                     <dxcp:ASPxCallbackPanel ID="ASPxCallbackPanel1" runat="server"
                          ClientInstanceName="devcbpnlshow" OnCallback="devcbpnlShow_Callback" 
                         LoadingPanelText="加载中">
                         <PanelCollection>
                             <dxp:PanelContent ID="PanelContent1" runat="server">
                                 <asp:Label ID="Label1" runat="server" Text="Label" Width="120px"></asp:Label>
                             </dxp:PanelContent>
                         </PanelCollection>
                     </dxcp:ASPxCallbackPanel>
                 </dxpc:PopupControlContentControl>
             </ContentCollection>
</dxpc:ASPxPopupControl>

鼠标移动信息框的呈现：

一、整个页面所有DOM元素mousemove事件绑定运行效果：

window.onload = function() {
    _aspxAttachEventToDocument("mousemove", OnMouseMove);
    //页面Doucument下所有元素绑定事件
}

二、信息框呈现的坐标计算

function CalculateRelativeX(x, clickedElement) {
    var left = _aspxGetAbsoluteX(clickedElement);        
    return Math.abs(x - left);
}
function CalculateRelativeY(y, clickedElement) {
    var top = _aspxGetAbsoluteY(clickedElement);
    return Math.abs(y - top);
}

三、鼠标移动事件(核心)

function OnMouseMove(evt) {
    var srcElement = _aspxGetEventSource(evt);
    if (chart.GetMainDOMElement() != srcElement)
    //判断鼠标移动到的元素是否是chart dom树下的元素
        return;
    var x = CalculateRelativeX(_aspxGetEventX(evt), srcElement);
    var y = CalculateRelativeY(_aspxGetEventY(evt), srcElement);    
    //计算出相对坐标，相对于chart的坐标系下的相对坐标
    var hitInfo = chart.HitTest(x, y);
    //获得chart内x,y处的dom对象。坐标为相对坐标,以chart左下角为0，0
    for (var i = 0; i < hitInfo.length; i++) 
        if (hitInfo[i].additionalObject instanceof ASPxClientSeriesPoint&&hitInfo[i].additionalObject.series.name=="弧度曲线测试") {
        //additionalObject得到当前dev元素所属的对象
            var text="这是一个鼠标移动测试";
            ToolTip.ShowAtPos(_aspxGetEventX(evt) + 5, _aspxGetEventY(evt) + 10);
            ToolTip.SetContentHTML("<span style=\"white-space:nowrap\">" + text + ": " + hitInfo[i].additionalObject.argument + 
            ","+hitInfo[i].additionalObject.values[0]+"</span>");
            return;
        }
    ToolTip.Hide();
}

鼠标点击传入服务端并出现所需要更新的内容

前台js编写：主要使用xtrachart的ObjectHotTrack以及ObjectSelect事件
后台代码：

protected void devcbpnlShow_Callback(object sender, DevExpress.Web.ASPxClasses.CallbackEventArgsBase e)
    {
        Label1.Text = "我被点击了，我的坐标是：" + Hidden1.Value;
    }
    protected void WebChartControl1_ObjectSelected(object sender, HotTrackEventArgs e)
    {
        ChartBinding(sender);
        Series CategoriesSeries = WebChartControl1.GetSeriesByName("柱状图测试");
        if (CategoriesSeries.Visible)
        {
            SeriesPoint point = e.AdditionalObject as SeriesPoint;
            if (point != null)
            {              
                //可以进行一系列操作，例如异步更新显示一张数据表等等。
            }
        }
    }

前台代码:

<ClientSideEvents ObjectHotTracked="function(s, e) {HotTracked(s,e);       
 }" ObjectSelected="function(s, e) { onObjectSelect(s,e);} " />

function HotTracked(s,e){
     var hitInCategory = e.hitInfo.inSeries && e.chart.series[0].visible;
     //判断聚焦元素是否是图形中的线条并且该线为可见
     var hitInBackTitle = e.hitInfo.inChartTitle && !e.chart.series[0].visible;
     //判断聚焦元素是否是图形中的图例标题并且可见
     s.SetCursor((hitInCategory || hitInBackTitle) ? 'pointer' : 'default'); 
     //设置鼠标形状
}
function onObjectSelect(s,e) {
    var hitInCategory = e.hitInfo.inSeries && e.chart.series[0].visible;
    var hitInBackTitle = e.hitInfo.inChartTitle && !e.chart.series[0].visible;
    $get("Hidden1").value='';
    e.processOnServer=false;
    //是否触发服务端对象选择事件
    if(e.hitObject.name=='柱状图测试'){      
        if(e.additionalHitObject!=null){
            e.processOnServer = hitInCategory || hitInBackTitle;
            ClickTip.ShowAtPos(e.absoluteX + 5, e.absoluteY + 10);
            $get("Hidden1").value=e.additionalHitObject.argument+","+e.additionalHitObject.values[0];
            devcbpnlshow.PerformCallback();
        }
        //仅仅是用来证明能传到后台显示其他一些特殊内容
    }
}

运行效果：