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(不懂,调试时才发现),但是在调用本页面时不行。最好还是不在本页面做请求。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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)
· 程序员常用高效实用工具推荐,办公效率提升利器!