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

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>

鼠标移动信息框的呈现：

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();
}

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

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();
}
//仅仅是用来证明能传到后台显示其他一些特殊内容
}
}