当前位置：首页 > 开发资源 » 示例代码 » 如何使用jQuery为XtraCharts Suite控件增加交互性？

如何使用jQuery为XtraCharts Suite控件增加交互性？

作者：zhuhm 来源：本站原创浏览：Loading...次发布时间：2012-09-11 评论：0条

XtraCharts Suite提供了一个丰富的即开即用的客户端应用程序接口（参看ASPxClientWebChartControl Class）。然而，它着重于图表本身。如果你想在容器（即父元素）中移动或者激活图表，你必须手动完成。jQuery可以最大程度地简化这项任务。

jQuery是一个Java脚本语言库，它能简化HTML文档遍历、事件处理、激活，快速web开发的Ajax交互。从jQuery法中访问图表最简单的方法就是把它置入一个辅助HTML语言元素中（例如DIV）并在jQuery法中使用它的标识符（id 属性）。然而，在某些情况下，你会需要访问立即图表元素。请使用“ASPxClientWebChartControl.GetMainDOMElement Method”来完成。两种方法都在以下的例子中展示出来。

C#
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.XtraCharts.v9.3.Web, Version=9.3.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %>
<%@ Register Assembly="DevExpress.XtraCharts.v9.3, Version=9.3.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.XtraCharts" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#chartContainer').fadeIn('slow');
$(chart.GetMainDOMElement()).click(function(event) {
if (!$(this).is(":hidden")) {
$($(this)).hide('slow', function() { $('#imgChartIconContainer').show(); });
}
});
$('#imgChartIcon').click(function(event) {
var chartElement = chart.GetMainDOMElement();
if ($(chartElement).is(":hidden")) {
$('#imgChartIconContainer').hide();
$(chartElement).show('slow');
}
});
$("#btnLeft").click(function() {
$("#chartContainer").animate({ "left": "-=50px" }, "slow");
});
$("#btnRight").click(function() {
$("#chartContainer").animate({ "left": "+=50px" }, "slow");
});
$("#btnTop").click(function() {
$("#chartContainer").animate({ "top": "-=50px" }, "slow");
});
$("#btnBottom").click(function() {
$("#chartContainer").animate({ "top": "+=50px" }, "slow");
});
})
</script>
</head>
<body>
<form id="form1" runat="server">

<asp:Button ID="btnUpdate" runat="server" Text="Update Chart"
OnClientClick="chart.PerformCallback('Update'); return false;"/>

<div id="chartContainer" style="display: none; position: absolute; left: 100px; top: 100px;">
<table border="0">
<tr>
<td>
</td>
<td align="center">
<asp:Image ID="btnTop" runat="server" ImageUrl="~/Images/top.bmp" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<asp:Image ID="btnLeft" runat="server" ImageUrl="~/Images/left.bmp" />
</td>
<td>
<div id="imgChartIconContainer" style="display: none;">
<asp:Image ID="imgChartIcon" runat="server" ImageUrl="~/Images/chart.bmp" ToolTip="Click to expand." />
</div>
<dxchartsui:WebChartControl ID="WebChartControl1" runat="server" Height="260px" Width="532px" ToolTip="Click to collapse."
ClientInstanceName="chart" EnableViewState="false" SaveStateOnCallbacks="false" oncustomcallback="WebChartControl1_CustomCallback">
</dxchartsui:WebChartControl>
</td>
<td>
<asp:Image ID="btnRight" runat="server" ImageUrl="~/Images/right.bmp" />
</td>
</tr>
<tr>
<td>
</td>
<td align="center">
<asp:Image ID="btnBottom" runat="server" ImageUrl="~/Images/bottom.bmp" />
</td>
<td>
</td>
</tr>
</table>
</div>

</form>
</body>
</html>

VB.NET
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.XtraCharts.v9.3.Web, Version=9.3.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.XtraCharts.Web" TagPrefix="dxchartsui" %>
<%@ Register Assembly="DevExpress.XtraCharts.v9.3, Version=9.3.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.XtraCharts" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#chartContainer').fadeIn('slow');
$(chart.GetMainDOMElement()).click(function(event) {
if (!$(this).is(":hidden")) {
$($(this)).hide('slow', function() { $('#imgChartIconContainer').show(); });
}
});
$('#imgChartIcon').click(function(event) {
var chartElement = chart.GetMainDOMElement();
if ($(chartElement).is(":hidden")) {
$('#imgChartIconContainer').hide();
$(chartElement).show('slow');
}
});
$("#btnLeft").click(function() {
$("#chartContainer").animate({ "left": "-=50px" }, "slow");
});
$("#btnRight").click(function() {
$("#chartContainer").animate({ "left": "+=50px" }, "slow");
});
$("#btnTop").click(function() {
$("#chartContainer").animate({ "top": "-=50px" }, "slow");
});
$("#btnBottom").click(function() {
$("#chartContainer").animate({ "top": "+=50px" }, "slow");
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="btnUpdate" runat="server" Text="Update Chart"
OnClientClick="chart.PerformCallback('Update'); return false;"/>
<div id="chartContainer" style="display: none; position: absolute; left: 100px; top: 100px;">
<table border="0">
<tr>
<td>
</td>
<td align="center">
<asp:Image ID="btnTop" runat="server" ImageUrl="~/Images/top.bmp" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<asp:Image ID="btnLeft" runat="server" ImageUrl="~/Images/left.bmp" />
</td>
<td>
<div id="imgChartIconContainer" style="display: none;">
<asp:Image ID="imgChartIcon" runat="server" ImageUrl="~/Images/chart.bmp" ToolTip="Click to expand." />
</div>
<dxchartsui:WebChartControl ID="WebChartControl1" runat="server" Height="260px" Width="532px" ToolTip="Click to collapse."
ClientInstanceName="chart" EnableViewState="false" SaveStateOnCallbacks="false" oncustomcallback="WebChartControl1_CustomCallback">
</dxchartsui:WebChartControl>
</td>
<td>
<asp:Image ID="btnRight" runat="server" ImageUrl="~/Images/right.bmp" />
</td>
</tr>
<tr>
<td>
</td>
<td align="center">
<asp:Image ID="btnBottom" runat="server" ImageUrl="~/Images/bottom.bmp" />
</td>
<td>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

本站文章除注明转载外，均为本站原创或翻译
欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明：文章转载自：DevExpress控件中文网 [http://www.devexpresscn.com/]
本文地址：http://www.devexpresscn.com/DevExpress-Resources/Documentation-230.html

关键字： XtraCharts Suite

相关产品： DXperience ASP.NET Subscription

上一篇： DevExpress DXCharts入门手册二：绑定图表系列到数据源

下一篇： 如何利用滚动图例创建一个图表控件？