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

最新推荐文章于 2021-08-23 17:30:50 发布

凝望_Ing

最新推荐文章于 2021-08-23 17:30:50 发布

阅读量819

点赞数

<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;
        }
    }
}

凝望_Ing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Highcharts结合Ajax完美实现时序图的展现(asp.net)版本（我是拿来做参考的）

HighCharts纯JS图表如何应对大数据量 var chart; var options; $(function () { $(document).ready(function () { Highcharts.setOptions({
复制链接

扫一扫