Highcharts结合Ajax完美实现时序图的展现(asp.net)版本（我是拿来做参考的）

来源：互联网发布：sql注入漏洞如何处理编辑：程序博客网时间：2024/05/22 12:35

<html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server">    <title>HighCharts纯JS图表如何应对大数据量</title>    <script type="text/javascript" src="/js/jquery.min.js"></script>    <script type="text/javascript">        var chart;        var options;        $(function () {            $(document).ready(function () {                Highcharts.setOptions({                    global: {                        useUTC: false                    }                });                options = new Highcharts.Chart({                    chart: {                        renderTo: 'container',                        type: 'spline',                        marginRight: 10,                        plotBackgroundColor: "rgba(255, 255, 255, .1)"                    },                    title: {                        text: 'Highcharts 时序图'                    },                    subtitle: {                        text: "(asp.net Ajax版本)",                        y: 40                    },                    xAxis: {                        type: 'datetime',                        tickPixelInterval: 150 //横坐标刻度之间的距离                    },                    yAxis: {                        title: {                            text: 'IP',                            rotation: 0                        },                        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: true //允许显示图例                    },                    exporting: {                        enabled: true //允许导出图表                    },                    credits: {                        enabled: true,   //是否显示右下角Logo                        text: "www.stepday.com",                        href: "http://www.stepday.com/myblog/?highcharts",                        style: {                            cursor: 'pointer',                            color: 'red',                            fontSize: '12px'                        },                        position: {                            align: 'right',                            x: -10,                            verticalAlign: 'bottom',                            y: -10                        }                    },                    series: [{                        name: 'STEP DAY',                        data: (function () {                            var data = [],                        time = (new Date()).getTime(),                        i;                            for (i = -19; i <= 0; i++) {                                data.push({                                    x: time + i * 1000,                                    y: Math.random() * 100                                });                            }                            return data;                        })()                    },                    {                        name: 'STEP DAY2',                        data: (function () {                            var data = [],                        time = (new Date()).getTime(),                        i;                            for (i = -19; i <= 0; i++) {                                data.push({                                    x: time + i * 1000,                                    y: Math.random() * 100                                });                            }                            return data;                        })()                    },                    {                        name: 'STEP DAY3',                        data: (function () {                            var data = [],                        time = (new Date()).getTime(),                        i;                            for (i = -19; i <= 0; i++) {                                data.push({                                    x: time + i * 1000,                                    y: Math.random() * 100                                });                            }                            return data;                        })()                    }]                });                //设置图表                chart = new Highcharts.Chart(options);            });            //每间隔2秒钟请求一次数据            setInterval(function () {                Query();            }, 2000);        });        //Ajax异步请求数据        function Query() {            $.ajax({                type: 'POST',                async: false,                url: "/RealTimeData.aspx?" + "RequestTime=" + (new Date().getTime()).toString(),                dataType: "json",                success: function (msg) {                    if (msg) {                        //获取数据                        var seriesList = options.series;                        var x = new Date().getTime();                        seriesList[0].addPoint([x, parseInt(msg.valone)], true, true);                        seriesList[1].addPoint([x, parseInt(msg.valtwo)], true, true);                        seriesList[2].addPoint([x, parseInt(msg.valthird)], true, true);                    }                },                error: function (errorMsg) {                    alert(errorMsg.toString());                }            });        }            </script></head><body>    <form id="form1" runat="server">    <script type="text/javascript" language="javascript" src="/js/highcharts.js"></script>    <script type="text/javascript" language="javascript" src="/js/exporting.js"></script>    <div id="container"  style="min-width: 400px;  width: 600px; height: 400px; margin: 0 auto">    </div>    <div style="width: 600px; text-align:left; padding-top:5px; padding-left:300px;">        感谢您对STEP DAY的屌丝<a href="http://www.stepday.com/myblog/?highcharts" target="_blank">highcharts</a>一贯的支持        <br />        请多访问我的博客：http://www.stepday.com/myblog/?highcharts    </div>    </form></body></html>

asp代码

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using Xcrs.PCL.Utility;namespace Demo{    public partial class RealTimeData : System.Web.UI.Page    {        protected void Page_Load(object sender, EventArgs e)        {            //返回格式：{曲线1的值:12,曲线2的值:34,曲线3的值:334}            var rel = new {                valone = GetFirst(),                valtwo = GetSencond(),                valthird = GetThird()            };            Response.Write(rel.ToJson());            Response.End();        }        /// <summary>        /// 获取第一个图例的随机数        /// </summary>        /// <returns></returns>        protected string GetFirst()        {            string val = "50";            Random randomObj = new Random();            val = randomObj.Next(20, 200).ToString();            return val;        }        /// <summary>        /// 获取第二个图例的随机数        /// </summary>        /// <returns></returns>        protected string GetSencond()        {            string val = "200";            Random randomObj = new Random();            val = randomObj.Next(200, 900).ToString();            return val;        }        /// <summary>        /// 获取第三个图例的随机数        /// </summary>        /// <returns></returns>        protected string GetThird()        {            string val = "500";            Random randomObj = new Random();            val = randomObj.Next(300, 800).ToString();            return val;        }    }}

0 0