Question

我的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"}]

我想设置＆＃34;价格＆＃34;作为Y轴数据和＆＃34;日期＆＃34;作为Highcharts中的X轴数据。上面的数组是从MySQL数据库生成的。

上面的数组会在新数据到来时更新，当新数据到来时，我想每次都用新数据更新我的图表。为此，我正在使用Ajax。

还有一件事，如果我的时间间隔是1秒，那么图表也会很好看。

Answer 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;
            }())

        } ]
    });

使用Highcharts绘制实时数据图

1 个答案: