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

你的名字 2020-11-01 08:59 687阅读 0赞

HighCharts中柱状图，饼图等可以实现点击图表数据来实现页面之间的跳转，跳转到重定向的页面，并且把对应图表的数据传递到要跳转到的页面

下面使用一个简单的实例进行演示：

这里使用HighCharts的Cloumn柱状图

1.首先，需要在页面的`<script>`中引入jquery.js,highcharts.js 以及导出图表需要用到的exporting.js

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中的名称保持一致

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参数传递的三种实现方法 ][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

![Center][]

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

得到传递的参数值

Param1:111111  
Param2:222222

[asp.net_url_]: http://blog.csdn.net/fysuccess/article/details/37812979
[Center]: https://img-blog.csdn.net/20140723112523491?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZnlzdWNjZXNz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center