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 2013-01-12 21:27 陈-chen 阅读(9277) 评论(0) 收藏举报