Highcharts简介

最近要做一个油田油压或温度数据的监控软件,数据会秒级写到数据库中,界面上需要动态展示数据跟随时间变化。

在网上找了很多js插件,希望能够即时高效的展示数据,最终确定了使用Highcharts插件。

Highcharts插件可以免费使用,而且可以高效的展示数据,下面先上一张效果图:


数据通过ajax每秒向数据库请求,图形跟随时间的变化向左移动。使用方法如下:

1.前台界面

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Highcharts Example</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.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',
                        animation: Highcharts.svg, // don't animate in old IE
                        marginRight: 10,
                         backgroundColor: {
                         linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                         stops: [
                            [0, 'rgb(96, 96, 96)'],
                            [1, 'rgb(16, 16, 16)']
                         ]
                      },
                      borderWidth: 0,
                      borderRadius: 15,
                      plotBackgroundColor: null,
                      plotShadow: false,
                      plotBorderWidth: 0,
                        events: {
                            load: function () { 
                                // set up the updating of the chart each second
                                var series = this.series[0];
                                var loaddata = function () {
                                    var x = (new Date()).getTime(); // current time
                                    var y = 0;
                                    $.ajax({
                                        async: false,
                                        type: "POST",
                                        dataType: "json",
                                        contentType: "application/json;charset=utf-8",
                                        url: "DataHandler.ashx", //读取数据
                                        success: function (result) {
                                            y = parseInt(result.amount);
                                        }
                                    });

                                    series.addPoint([x, y], true, true);

                                    $.ajax({
                                        type: "POST",
                                        dataType: "json",
                                        url: "AddHandler.ashx", //模拟向数据库插入数据 
                                        success: function (msg) {
                                        }
                                    });
                                };
                                setInterval(loaddata, 5000);//每5s执行一次
                            }
                        }
                    },
                    title: {
                        text: '油压数据实时监控',
                        style: { color: '#FFFF00', fontSize: '16px' }
                    },
                    xAxis: {
                        title: {
                            text: '检测时间',
                            style: { color: '#FFFF00' }
                        },  
                        type: 'datetime',
                        tickPixelInterval: 150,
                        labels: {
                            style: { color: '#FFE4B5' }
                        },
                        gridLineWidth: 1

                    },
                    yAxis: {
                        title: {
                            text: '油压(pa)',
                            style: { color: '#FFFF00' }
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }],
                        labels: {
                            style: { color: '#FFE4B5' }
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>油压:' + Highcharts.numberFormat(this.y, 2) + '</b><br/>'
                            + '时间:' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x)

                        },
                         crosshairs: true
                    },
                    plotOptions: {
                        spline: {
                            marker: {
                                radius: 4,
                                lineColor: '#FFE4B5',
                                lineWidth: 1
                            }
                        }
                    },
                    legend: {
                        enabled: true
                    },
                    exporting: {
                        enabled: true
                    },
                    series: [{
                        name: '油压变化图',
                        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 * 2000,
                                    y: Math.random() * 100
                                });
                            }
                            return data;
                        })()
                    }]
                });
            });
        });
		</script>
</head>
<body>
    <script src="highcharts.src.js" type="text/javascript"></script>
    <script src="exporting.js" type="text/javascript"></script>
    <div id="container" style="min-width: 310px; height:550px; margin: 0 auto">
    </div>
</body>
</html>

2.Aajx读取数据程序:

 public class DataHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string test = SQLHelper.ExecuteScalar("SELECT TOP(1) amount FROM RealOil ORDER BY recordtime DESC").ToString();
            //Random ran=new Random(0);
            //test=ran.Next(15,100).ToString();
           
            string jsonString = "{\"time\":1,\"amount\":\"" + test + "\"}";

            context.Response.Write(jsonString);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }


展开阅读全文

150讲轻松搞定Python网络爬虫

05-16
【为什么学爬虫?】        1、爬虫入手容易,但是深入较难,如何写出高效率的爬虫,如何写出灵活性高可扩展的爬虫都是一项技术活。另外在爬虫过程中,经常容易遇到被反爬虫,比如字体反爬、IP识别、验证码等,如何层层攻克难点拿到想要的数据,这门课程,你都能学到!        2、如果是作为一个其他行业的开发者,比如app开发,web开发,学习爬虫能让你加强对技术的认知,能够开发出更加安全的软件和网站 【课程设计】 一个完整的爬虫程序,无论大小,总体来说可以分成三个步骤,分别是: 网络请求:模拟浏览器的行为从网上抓取数据。 数据解析:将请求下来的数据进行过滤,提取我们想要的数据。 数据存储:将提取到的数据存储到硬盘或者内存中。比如用mysql数据库或者redis等。 那么本课程也是按照这几个步骤循序渐进的进行讲解,带领学生完整的掌握每个步骤的技术。另外,因为爬虫的多样性,在爬取的过程中可能会发生被反爬、效率低下等。因此我们又增加了两个章节用来提高爬虫程序的灵活性,分别是: 爬虫进阶:包括IP代理,多线程爬虫,图形验证码识别、JS加密解密、动态网页爬虫、字体反爬识别等。 Scrapy和分布式爬虫:Scrapy框架、Scrapy-redis组件、分布式爬虫等。 通过爬虫进阶的知识点我们能应付大量的反爬网站,而Scrapy框架作为一个专业的爬虫框架,使用他可以快速提高我们编写爬虫程序的效率和速度。另外如果一台机器不能满足你的需求,我们可以用分布式爬虫让多台机器帮助你快速爬取数据。   从基础爬虫到商业化应用爬虫,本套课程满足您的所有需求! 【课程服务】 专属付费社群+每周三讨论会+1v1答疑
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值