随笔 - 39  文章 - 3  评论 - 13  阅读 - 56877

Highcharts配合Jquery ajax 请求本页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Highcharts Example.aspx.cs" Inherits="WebApp.Highcharts_Example" %>
 
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
 
        <script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $(document).ready(function () {
                    Highcharts.setOptions({
                        global: {
                            useUTC: false
                        }
                    });
 
                    var chart;
                    chart = new Highcharts.Chart({
                        chart: {
                            renderTo: 'container',
                            type: 'spline',
                            marginRight: 10,
                            events: {
                                load: function () {
 
                                    // set up the updating of the chart each second
                                    var series = this.series[0];
                                    var LoadData = function () {
 
 
                                        var drp = $("#drp").val()
                                        $.ajax({
                                            
                                            url: 'Highcharts Example.aspx/getRandom',
                                            data: "{drp:"+drp+"}",
                                            dataType: 'json',
                                            type: 'post',
                                            contentType: "application/json;charset=utf-8",
                                            success: function (data) {
 
                                                var x = (new Date()).getTime();
                                                var y = $.parseJSON(data.d).val;
                                                series.addPoint([x, y], true, true);
 
                                            },
                                            error: function () { alert('Error !'); }
                                        });
 
                                        //   alert($("#drp").val());
                                        //                                      var x = (new Date()).getTime(), // current time
                                        //                                        y = Math.random();
                                        //                                      series.addPoint([x, y], true, true);
                                    };
                                    //LoadData();
                                    setInterval(LoadData, 2000);
                                }
                            }
                        },
                        title: {
                            text: 'Live random data'
                        },
                        xAxis: {
                            type: 'datetime',
                            tickPixelInterval: 150
                        },
                        yAxis: {
                            title: {
                                text: 'Value'
                            },
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                        },
                        tooltip: {
                            formatter: function () {
                                return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 2);
                            }
                        },
                        legend: {
                            enabled: false
                        },
                        exporting: {
                            enabled: false
                        },
                        series: [{
                            name: 'Random data',
                            data: (function () {
                                // generate an array of random data
                                var data = [],
                        time = (new Date()).getTime(),
                        i;
 
                                for (i = -19; i <= 0; i++) {
                                    data.push({
                                        x: time + i * 1000,
                                        y: Math.random()
                                    });
                                }
                                return data;
                            })()
                        }]
                    });
                });
 
            });
        </script>
    </head>
    <body>
<script src="Scripts/highcharts/highcharts.js"></script>
<script src="Scripts/highcharts/modules/exporting.js"></script>
 
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
 
        <select id="drp" name="drp">
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
 
    </body>
</html>

 后台:

using System.Web.Services;
namespace WebApp
{
    public partial class Highcharts_Example : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
 
 
        [WebMethod]
        public static string getRandom(string drp)
        {
 
            Random rm = new Random();
 
            int _drp = Convert.ToInt32(drp);
           // int drp =Convert.ToInt32(HttpContext.Current.Request.Params["drp"]);
 
            return "{ \"val\":" + rm.Next(100) * _drp + "}";
        }
    }
}

 Highcharts模仿CPU动作,2秒一刷新。调用本页面方法,首先后台方法必须为静态的,还在ajax请求的时候contextType格式必须是如上,data传值,这个问题困扰很久以前传值都用data: { "drp": $("#drp").val() }这个格式要不老是报500错误,还有得到的数据格式,在后面必须加个d(不懂,调试时才发现),但是在调用本页面时不行。最好还是不在本页面做请求。

posted on   陈-chen  阅读(9267)  评论(0编辑  收藏  举报
编辑推荐:
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!
< 2013年1月 >
30 31 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 1 2
3 4 5 6 7 8 9

点击右上角即可分享
微信分享提示