javascript - 如何在不刷新html网页的情况下显示highchart系列图中的过渡？

Question

我正在使用存储在 data.json 文件中的 api 获取 JSON 数据。随后，JavaScript 使用该 data.json 文件并使用它来绘制 Highcharts 。 JSON 文件每时每刻都在变化，并且 data.json 文件正在随着数据进行更新。我将此 javascript 文件链接到 html 文件，然后在 chrome 浏览器上运行它。由于 data.json 文件每时每刻都在变化，因此与其对应的图表也在每时每刻都在变化。为了查看图表，我必须手动刷新才能看到该图表。如何在不刷新浏览器的情况下显示图表中数据的转换。

我不想动态刷新 DIV 或整个 HTML 页面。引用:https://onedesigncompany.com/

与本网站中的转换类似。这就是我的graph好像这是我的 html + javascript 代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
enter code here<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js" type="text/javascript"></script>


<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

<script type="text/javascript">





$(document).ready(function() {
   
    $("#container").load("index.html");



    var options = {
        chart: {
            renderTo: 'container',
            type: 'scatter',
            zoomType: 'xy'
        },
         title: {
            text: 'Number of people Versus floor'
        },
        xAxis: {
            title: {
                enabled: true,
                text: 'Uids'
            },
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true
        },
        yAxis: {
            title: {
                text: 'Floor'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 100,
            y: 70,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
            borderWidth: 1
        },
        
        plotOptions: {
            scatter: {
                    marker: {
                        radius: 5,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                states: {
                    hover: {
                        marker: {
                            enabled: false
                        }
                    }
                },
                tooltip: {
                    headerFormat: '<b>{series.name}</b><br>',
                    pointFormat: 'uid: {point.x} , floor: {point.y} '
                }
            }
    },


        
//        series: [{}]
        
    };


    $.getJSON('/static/data/data.json', function(data) {
        
        //floor0 data
    var floor0=[];
    var i,j;
    for(i=0;i<data.size;i++)
    {
        if(data.occupancy_information[i].building=="Academic" && data.occupancy_information[i].floor=="0")
            floor0.push(data.occupancy_information[i].uids);
    }
    var merged0 = [].concat.apply([], floor0);
    var result0=[];
    result0=merged0.map(Number);    
    var len0=result0.length;
    
    var iMax0 = len0;
    var jMax0 = 2;
    var f0 = new Array();


     for (i=0;i<iMax0;i++) {
     f0[i]=new Array();
     for (j=0;j<jMax0;j++) {
      f0[i][0]=parseInt(merged0[i]);
      f0[i][1]=0;

     }
    }
        
        
        //floor1 data    
    var floor1=[];
    for(i=0;i<data.size;i++)
    {
        if(data.occupancy_information[i].building=="Academic" && data.occupancy_information[i].floor=="1")
            floor1.push(data.occupancy_information[i].uids);
    }
    var merged1 = [].concat.apply([], floor1);
    var result1=[];
    result1=merged1.map(Number);    
    var len1=result1.length;
    
    var iMax1 = len1;
    var jMax1 = 2;
    var f1 = new Array();


     for (i=0;i<iMax1;i++) {
     f1[i]=new Array();
     for (j=0;j<jMax1;j++) {
      f1[i][0]=parseInt(merged1[i]);
      f1[i][1]=1;

     }
    }
       
        
             //floor2 data    
    var floor2=[];
    for(i=0;i<data.size;i++)
    {
        if(data.occupancy_information[i].building=="Academic" && data.occupancy_information[i].floor=="2")
            floor2.push(data.occupancy_information[i].uids);
    }
    var merged2 = [].concat.apply([], floor2);
    var result2=[];
    result2=merged2.map(Number);    
    var len2=result2.length;
    
    var iMax2 = len2;
    var jMax2 = 2;
    var f2 = new Array();


     for (i=0;i<iMax2;i++) {
     f2[i]=new Array();
     for (j=0;j<jMax2;j++) {
      f2[i][0]=parseInt(merged2[i]);
      f2[i][1]=2;

     }
    }
        
            //floor3 data    
    var floor3=[];
    for(i=0;i<data.size;i++)
    {
        if(data.occupancy_information[i].building=="Academic" && data.occupancy_information[i].floor=="3")
            floor3.push(data.occupancy_information[i].uids);
    }
    var merged3 = [].concat.apply([], floor3);
    var result3=[];
    result3=merged3.map(Number);    
    var len3=result3.length;
    
    var iMax3 = len3;
    var jMax3 = 2;
    var f3 = new Array();


     for (i=0;i<iMax3;i++) {
     f3[i]=new Array();
     for (j=0;j<jMax3;j++) {
      f3[i][0]=parseInt(merged3[i]);
      f3[i][1]=3;

     }
    }

            //floor4 data    
    var floor4=[];
    for(i=0;i<data.size;i++)
    {
        if(data.occupancy_information[i].building=="Academic" && data.occupancy_information[i].floor=="4")
            floor4.push(data.occupancy_information[i].uids);
    }
    var merged4 = [].concat.apply([], floor4);
    var result4=[];
    result4=merged4.map(Number);    
    var len4=result4.length;
    
    var iMax4 = len4;
    var jMax4 = 2;
    var f4 = new Array();


     for (i=0;i<iMax4;i++) {
     f4[i]=new Array();
     for (j=0;j<jMax4;j++) {
      f4[i][0]=parseInt(merged4[i]);
      f4[i][1]=4;

     }
    }
        
        //floor5 data    
    var floor5=[];
    for(i=0;i<data.size;i++)
    {
        if(data.occupancy_information[i].building=="Academic" && data.occupancy_information[i].floor=="5")
            floor5.push(data.occupancy_information[i].uids);
    }
    var merged5 = [].concat.apply([], floor5);
    var result5=[];
    result5=merged5.map(Number);    
    var len5=result5.length;
    
    var iMax5 = len5;
    var jMax5 = 2;
    var f5 = new Array();


     for (i=0;i<iMax5;i++) {
     f5[i]=new Array();
     for (j=0;j<jMax5;j++) {
      f5[i][0]=parseInt(merged5[i]);
      f5[i][1]=5;

     }
    }
                   
        var chart = new Highcharts.Chart(options);
        chart.addSeries({                        
            name: 'Ground floor',
            data: f0
        }, false);
        chart.addSeries({                        
            name: 'First Floor',
            data: f1
        }, false);
         chart.addSeries({                        
            name: 'Second Floor',
            data: f2
        }, false);
         chart.addSeries({                        
            name: 'Third Floor',
            data: f3
        }, false);
         chart.addSeries({                        
            name: 'Fourth Floor',
            data: f4
        }, false);
        chart.addSeries({                        
            name: 'Fifth Floor',
            data: f5
        }, false);
        chart.redraw();

    });

});

</script>

Answer 1

将ajax/getJson保持在设定的间隔内，并在按摩器函数每五秒返回一次数据时将数据传递给按摩器函数，这样页面就不会刷新。

看这个例子

var time_interval = 5000;
setInterval(function () {
$.ajax({
    url: 'your_path_to_the_api',
    data: '',
    cache: false,
    type: 'POST',
    success: function (data) {
        $('#container').text(data);
      }
   });
 }, time_interval);