HighCharts中URL在页面之间传参数及跳转解决方案

来源：互联网发布：java 领域模型编辑：程序博客网时间：2024/06/08 09:03

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&param2=222222'                 }, {                     y: 50.8,                     url: 'demo1.aspx?param3=333333&param4=444444'                 }, {                     y: 145.8,                     url: 'demo2.aspx?param1=111111&param2=222222'                 }, {                     y: 46.8,                     url: 'demo3.aspx?param1=111111&param2=222222'                 }, {                     y: 125.2,                     url: 'demo4.aspx?param1=111111&param2=222222'                 }, {                     y: 135.6,                     url: 'demo5.aspx?param1=111111&param2=222222'                 }, {                     y: 124.8,                     url: 'demo6.aspx?param1=111111&param2=222222'                 }]             }]         });     });     </script>

3.<body>中放置一个div容器，注意id=“container” 一定要和2中的名称保持一致

 <div id="container" style="height: 400px"> </div>

4.前台测试数据一些完毕，下面就要在页面之间进行参数传递了，这里我们只演示url: 'demo.aspx?param1=111111&param2=222222'，，点击该条数据

可以跳转到demo.aspx页面，并把数据param1=111111&param=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

点击第一个数据 http://localhost:35094/demo/demo.aspx?param1=111111&param2=222222

得到传递的参数值

Param1:111111
Param2:222222

0 0