addPoint with HIGHCHARTS(xAxis dateTime)

时间:2015-10-30 15:53:05

标签: javascript node.js highcharts socket.io

我根据本教程实时创建图表。 http://www.highcharts.com/docs/working-with-data/live-data

然后,当我使用nodejs和socket I MODIFY代码但突然图形不更新.. 这是代码:

代码客户端:

var chart;
var series = Array();
socket.on('ping', function(data){
    console.log(data);
      socket.emit('pong', {beat: 1})
    //console.log(i);   
requestData(data);      

    });
        function requestData(point) {
        if(point !== null){


                    //console.log('if'+point);
                    var series = chart.series[0],
                        shift = series.data.length > 60; // shift if the series is longer than 20
                    //alert(point);
                    chart.series[0].addPoint(point, true, shift);

                    //setTimeout(requestData, 5000);    
        }
}

        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'spline',
                            zoomType: 'x',
                    backgroundColor: "#333333"
                },
                        load: function(){
                    chart = this;
                    requestData();
                },
                title: {
                    text: 'Bitcoin price'
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150,
                    maxZoom: 20 * 1000
                },
                yAxis: {
                    minPadding: 0.2,
                    maxPadding: 0.2,
                    title: {
                        text: 'Value',
                        margin: 80
                    }
                },
                series: [{
                    name: 'Bitcoin Price (Spot)',
                    data: []
                }]
            });     
        });

代码服务器:

var amount;
var dateN;
function updateChart(){
    setTimeout(updateChart, 5000);
    dateN =(Math.floor(new Date().getTime() /1000)*1000); // equal to time() in php
  client.getSpotPrice({'currency': 'USD'}, function(err, obj) {
        amount = obj.data.amount;
        });
    var info = [dateN,amount+phpjs.rand(01,99)];
    var pointd = JSON.stringify(info);
    console.log(pointd);
    //console.log(amount);
    pointd = phpjs.str_replace('"','',pointd);
    io.sockets.emit('ping', pointd);
}

io.sockets.on('connection', function (socket) {
    socket.on('pong', function(data){
        console.log("Pong received from client");
    });
});

当我查看日志控制台时,我很快就会[1446218389000,323.3578]。 正是我在基地用php中的脚本收到的内容。

但不更新图表.. 如果你有想法?

谢谢:)

1 个答案:

答案 0 :(得分:2)

Shift取布尔值,在您的情况下为条件

shift = series.data.length > 60; 

返回false,因为您可能获得的点数据可能不是> 60。所以改为使用

chart.series[0].addPoint(point, true, true); //true in place of shift.