使用高图表绘制实时数据图

Draw real time data graph with Highcharts

本文关键字：数据实时绘制高图表更新时间：2023-09-26

我的json数据数组如下：

[{"item":"Mango","price":30.0,"date":"Feb 18, 2016 6:54:49 PM"},{"item":"karela","price":45.0,"date":"Feb 20, 2016 3:39:08 PM"},{"item":"karela","price":455.0,"date":"Feb 24, 2016 3:59:28 PM"},{"item":"karela","price":65.0,"date":"Feb 29, 2016 10:46:16 AM"},{"item":"karela","price":45.0,"date":"Feb 29, 2016 10:47:05 AM"},{"item":"iphone","price":300.0,"date":"Mar 2, 2016 3:32:14 PM"}]

我想在Highcharts中将"价格"设置为Y轴数据，将"日期"设置为X轴数据。上面的数组是从 MySQL 数据库生成的。

上面的数组会在新数据到来时更新，当新

数据到来时，我想每次都用新数据更新我的图形。为此，我正在使用Ajax。

还有一件事，如果我的时间间隔是 1 秒，那么图形也会以漂亮的外观显示。

在后端创建一个 websocket 程序，并使用 HTML 5 功能 websocket 连接到该套接字，使用以下代码。这是一个强大的动态代码，我写了之后我放弃了它，因为许可证问题。高图表不是免费许可证

$('#Chart').highcharts('StockChart',  {
        colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",
                 "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
        chart: {
            //type: 'areaspline',
                     events: {
                    load: function () {
                        // set up the updating of the chart each second
                        var series1 = this.series[0];

                        var webSocket = 
                            new WebSocket('ws://'+Config.ip+':'+Config.port+'/websocket');
                        webSocket.onerror = function(event) {
                            alert(event.data);
                        };
                        webSocket.onopen = function(event) {
                            webSocket.send($scope.IDSelected);
                            return false;
                        };
                        webSocket.onmessage = function(event) {
                            var point = JSON.parse(event.data);
                            var dataPoint1 ={
                                    x:(new Date()).getTime(),
                                    y: Math.round(point.point1),
                                    color:'#00ff00',
                                    segmentColor :'#00ff00',
                                     real_valueMap : Math.round(point.point1)
                                }
                            series1.addPoint(dataPoint1);
                        };
                    }

                     } },
        title: {
            text: "Title"
        } 
        xAxis: {
           type:"datetime",
            plotBands: [{ // visualize the weekend
                from: 4.5,
                to: 6.5,
                color: 'rgba(68, 170, 213, .2)'
            }]
        },
        yAxis: {
            title: {
                text: 'Percentage'
            }
        },
        tooltip: {
            shared: true,
            valueSuffix: ' units'
        }, 
        plotOptions: {
            areaspline: {
                fillOpacity: 0.5
            },
            spline: {
                turboThreshold: 2000}
        },
        series: [{
            marker: {
                states: {
                  hover: {
                    fillColor: {}
                  }
                }
              },
            type: 'coloredline',
            name: 'GraphName1',
            data: (function () {
                // generate an array of random data
                var data = [];
                return data;
            }())
        } ]
    });