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

最新推荐文章于 2021-04-07 19:37:32 发布

fysuccess

最新推荐文章于 2021-04-07 19:37:32 发布

阅读量5k

点赞数

分类专栏：前端技术 C# HighCharts 文章标签： asp.net highcharts javascript url

本文链接：https://blog.csdn.net/fysuccess/article/details/38059817

版权

C# 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端技术

5 篇文章 0 订阅

订阅专栏

HighCharts

1 篇文章 0 订阅

订阅专栏

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