HighCharts中URL在頁面之間傳引數及跳轉解決方案
阿新 • • 發佈：2019-01-31
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的方式也可以實現，但是會比較麻煩，可以參考的我的另一篇部落格
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