HighCharts中柱状图，饼图等可以实现点击图表数据来实现页面之间的跳转，跳转到重定向的页面，并且把对应图表的数据传递到要跳转到的页面
下面使用一个简单的实例进行演示：
这里使用HighCharts的Cloumn柱状图
1.首先，需要在页面的<script>中引入jquery.js,highcharts.js 以及导出图表需要用到的exporting.js
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/modules/exporting.js"></script>
2.编写Column图的数据，这里展示一个简单的demo
<pre name="code" class="html"> $(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
//在当前页面跳转
window.open(this.options.url);
//当出现[window object]404错误时，只需要调用window.open(this.options.url)就OK了
//跳出到新页面，那就用
// location.href = "javascript:void(window.open('" + this.options.url + //"','PageTitle','fullscreen=1;location=1;directories =1;status=1;toolbar=1;scrollbars=1;resizable=1'))"
//这里使用的url要后面的series中的data里使用json格式给出，可以使用静态json，也可以从后台传递json数据
}
}
}
}
},
series: [{
data: [{
y: 100.8,
url: 'demo.aspx?param1=111111¶m2=222222'
}, {
y: 50.8,
url: 'demo1.aspx?param3=333333¶m4=444444'
}, {
y: 145.8,
url: 'demo2.aspx?param1=111111¶m2=222222'
}, {
y: 46.8,
url: 'demo3.aspx?param1=111111¶m2=222222'
}, {
y: 125.2,
url: 'demo4.aspx?param1=111111¶m2=222222'
}, {
y: 135.6,
url: 'demo5.aspx?param1=111111¶m2=222222'
}, {
y: 124.8,
url: 'demo6.aspx?param1=111111¶m2=222222'
}]
}]
});
});
</script>
3.<body>中放置一个div容器，注意id=“container” 一定要和2中的名称保持一致
<div id="container" style="height: 400px"> </div>
4.前台测试数据一些完毕，下面就要在页面之间进行参数传递了，这里我们只演示url: 'demo.aspx?param1=111111¶m2=222222'，，点击该条数据
可以跳转到demo.aspx页面，并把数据param1=111111¶m=222222以参数的形式传递过去。在demo.aspx中使用Request.Params["param1"]即可获取
demo.aspx的后台中获取参数的方法如下
string param1= (string)Request.Params["param1"];
Label1.Text = param1;
string param2 = Request.Params["param2"];
Label2.Text = param2;
获取到传递来的参数值，并显示在demo.aspx前台的两个Label中
<body>
<form id="form1" runat="server">
<div>
Param1:<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
Param2:<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
5.到此，highcharts中点击表数据，在页面之间传递参数，并跳转到指定页面的过程演示完毕。
下面给出实例的完整代码：
HighChartsDemo.aspx前台的页面代码，后台不用修改
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HighChartsDemo.aspx.cs" Inherits="demo_HighChartsDemo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/highcharts.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/4.0.1/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
//在当前页面跳转
window.open(this.options.url);
//当出现[window object]404错误时，只需要调用window.open(this.options.url)就OK了
//跳出到新页面，那就用
// location.href = "javascript:void(window.open('" + this.options.url + //"','PageTitle','fullscreen=1;location=1;directories =1;status=1;toolbar=1;scrollbars=1;resizable=1'))"
//这里使用的url要后面的series中的data里使用json格式给出，可以使用静态json，也可以从后台传递json数据
}
}
}
}
},
series: [{
data: [{
y: 100.8,
url: 'demo.aspx?param1=111111¶m2=222222'
}, {
y: 50.8,
url: 'demo1.aspx?param3=333333¶m4=444444'
}, {
y: 145.8,
url: 'demo2.aspx?param1=111111¶m2=222222'
}, {
y: 46.8,
url: 'demo3.aspx?param1=111111¶m2=222222'
}, {
y: 125.2,
url: 'demo4.aspx?param1=111111¶m2=222222'
}, {
y: 135.6,
url: 'demo5.aspx?param1=111111¶m2=222222'
}, {
y: 124.8,
url: 'demo6.aspx?param1=111111¶m2=222222'
}]
}]
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container" style="height: 400px">
</div>
</form>
</body>
</html>
demo.aspx的前台页面代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="demo.aspx.cs" Inherits="demo_demo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
Param1:<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
Param2:<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
demo.aspx后台的页面代码，只是用来接受传递的参数，其实这里在前台使用解析url的方式也可以实现，但是会比较麻烦，可以参考的我的另一篇博客
asp.net中页面间url参数传递的三种实现方法
demo.aspx后台页面的代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class demo_demo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string param1 = (string)Request.Params["param1"];
Label1.Text = param1;
string param2 = Request.Params["param2"];
Label2.Text = param2;
}
}
该demo已经完整测试验证，可行，运行效果如下：
http://localhost:35094/demo/HighChartsDemo.aspx
得到传递的参数值
Param1:111111
Param2:222222