使用HIghchart.js和socket.io繪制動態混合條形圖和折線圖以獲取實時數據

Question

我正在嘗試使用Highchart.js繪制動態的混合條形圖和折線圖。 我正在使用socket.io將實時數據獲取到我的網頁（我使用Flask作為我的Web服務器，所以使用Flask-socketIO）。

我可以使用console.log打印進入我的網頁的數據，但是我缺少圖表中未呈現的數據。

我試圖添加xAxis以及兩個Series值。

<!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繪制動態混合條形圖和折線圖以獲取實時數據

問題描述

1 個解決方案

解決方案1
0 已采納 2018-01-25 12:42:49

使用HIghchart.js和socket.io繪制動態混合條形圖和折線圖以獲取實時數據

問題描述

1 個解決方案

解決方案1 0 已采納 2018-01-25 12:42:49

解決方案1
0 已采納 2018-01-25 12:42:49