在ASP.NET聊天室中的Highcharts自動刷新MVC

Question

我正在使用asp.net MVC 5.我創建了4種不同類型的圖表，它們在同一頁面上查看。我以15-20秒的間隔從儀表獲取數據。我想要做的就是在每15/20秒後刷新我的圖表，因此對於數據庫中的每個新條目，我都不應該手動刷新我的頁面。爲此，我在我的圖形視圖中使用javascript setInterval像波紋管

setInterval(function() { 
    $.ajax({ 
     url: '/Home/MultiGraph', 
     type: "POST", 
     success: function (result) { 
      $("#c1").html(result); 
     } 
    });   
    alert("hello"); 
}, 3000); 

婁是我divs在我所放置我的圖表

<div id="c1"> 
    <div id="container1" style="height: 400px; width:auto"></div> 


    <div id="container2" style="height: 400px; width:auto"></div> 


    <div id="container3" style="height: 400px; width:auto"></div> 


    <div id="container4" style="height: 400px; width:auto"></div> 
</div> 

在$(window).on('load', function() { }我已經把我的4個圖初始化像波紋管

var chart1 = new Highcharts.Chart({//rendered to container1}); 
var chart2 = new Highcharts.Chart({//rendered to container2}); 
var chart3 = new Highcharts.Chart({//rendered to container3}); 
var chart4 = new Highcharts.Chart({//rendered to container4}); 

圖表中的所有數據都以數組格式顯示

所以運行我的網頁看起來像波紋圖像

我按Ok後之後，我得到波紋管

我不知道爲什麼它的發生，我只是想刷新/只重新載入圖表，但所有我得到上述結果，因爲它刷新整個頁面也刷新我無法查看我的圖表

而且我的圖表被放置在一個視圖，該視圖是繼主layout即其他圖表和搜索欄我的觀點是，從佈局未來

UPDATE：

貝婁是它向我展示形象在result

數據任何幫助將高度讚賞

Answer 1

因爲您正在使用setInterval它會重複該子句中的所有內容，因此它會在該對象中添加HighChart對象。

你可以做什麼是你的Ajax添加beforeSend：

$.ajax({ 
    url: '/Home/MultiGraph', 
    type: "POST", 
    beforeSend: function (result) { 
      $("#c1").empty(); //empty first the div 
    }, 
    success: function (result) { 
     $("#c1").html(result); 
    } 
});