使用 HIghchart.js 和 socket.io 为实时数据绘制动态混合条形图和折线图

Question

我正在尝试使用 Highchart.js 绘制动态的混合条形图和折线图。我正在使用 socket.io 将实时数据获取到我的网页（我使用 Flask 作为我的网络服务器，因此使用 Flask-socketIO）。

我可以使用 console.log 打印进入我的网页的数据，但我遗漏了图表中未呈现的内容。

我正在尝试添加 xAxis 以及两个系列值。

<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>  
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

    <link href="../static/css/authz.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


    <script>

        $(document).ready(function(){

        var myChart = Highcharts.chart('containerX', {

        chart: {
        zoomType: 'xy',
        events: {
              load: function () {
                  // set up the updating of the chart on each sample

                  var categories = this.xAxis[0].categories;
                  var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
                  var series1 = this.series[0]
                  var series2 = this.series[1]
                 socket.on('my_response_data', function (sample) {
                      //add chart data to series                              
                      var x =   sample.logTime   
                      var y = sample.logDuration  
                      var z = sample.totalSession  
                      console.log( x + "   " + y  + "  " + z) //Printing properly to console e.g 2018-01-25T03:58:35.781 3  211 
                      categories.push(sample.logTime)        
                      series1.addPoint(y, false, true);
                      series2.addPoint(z, false, true);
                      myChart.redraw();


                  });

              }
          },
},
title: {
    text: 'Sacred Tests'
},
subtitle: {
    text: 'Source: My Secret Source'
},    
xAxis: [{
    categories: [],
    crosshair: true
}],
yAxis: [{ // Primary yAxis        
    title: {
        text: 'Sessions',
        style: {
            color: Highcharts.getOptions().colors[1]
        }
    },
    labels: {
        format: '{value}',
        style: {
            color: Highcharts.getOptions().colors[1]
        }
    }
}, { // Secondary yAxis
    title: {
        text: 'Duration',
        style: {
            color: Highcharts.getOptions().colors[0]
        }
    },
    labels: {
        format: '{value} ms',
        style: {
            color: Highcharts.getOptions().colors[0]
        }
    },
    opposite: true
}],
tooltip: {
    shared: true
},
legend: {
    layout: 'vertical',
    align: 'left',
    x: 120,
    verticalAlign: 'top',
    y: 100,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
    name: 'Sessions',
    type: 'column',
    yAxis: 1,
    data: [],
    tooltip: {
        valueSuffix: ''
    }

}, {
    name: 'Duration',
    type: 'spline',
    data: [],        
    tooltip: {
        valueSuffix: 'ms'
    }
}]
});

});


    </script>
</head>
<body>
    <div id="containerX" style="min-width: 310px; height: 400px; margin: 0 auto"></div>       

</body>

Answer 1

使用 addPoint(point, redraw, shift, animation) 和设置 shift=true 一次只显示一个点是个问题。这将删除之前的点，图表看起来是空的。

简单的解决方案是使用：

series1.addPoint(y, false, false, false);
series2.addPoint(z, false, false, false);
myChart.redraw();

使用 HIghchart.js 和 socket.io 为实时数据绘制动态混合条形图和折线图

Drawing a dynamic Mixed Bar and Line chart with HIghchart.js with socket.io for live data

javascript

highcharts

socket.io

flask-socketio