Highcharts簡介

時間 2019-11-29

標籤 highcharts 簡介简体版

原文原文鏈接

最近要作一個油田油壓或溫度數據的監控軟件，數據會秒級寫到數據庫中，界面上須要動態展現數據跟隨時間變化。javascript

在網上找了不少js插件，但願可以即時高效的展現數據，最終肯定了使用Highcharts插件。html

Highcharts插件能夠無償使用，並且能夠高效的展現數據，下面先上一張效果圖：java

數據經過ajax每秒向數據庫請求，圖形跟隨時間的變化向左移動。使用方法以下：jquery

1.前臺界面ajax

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

1. Highcharts簡介
2. highCharts圖表入門簡介
3. 【Highcharts 介紹】
4. highcharts簡單用法
5. Highcharts介紹及vue示例
6. highcharts的簡單使用
7. highcharts筆記 highcharts學習 highcharts用法
8. highcharts
9. Highcharts
10. highcharts折線圖的簡單使用
更多相關文章...
• Scala 簡介 - Scala教程
• AJAX 簡介 - PHP教程
• Github 簡明教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。