在ASP.NET MVC中自動刷新Highcharts

Question

我正在使用asp.net MVC5。我在其中創建了4種不同類型的圖表，這些圖表在同一頁面上查看。 我正在以近15-20秒的間隔從電表獲取數據。 我要做的就是每15/20秒刷新一次圖表，因此對於DB中的每個新條目，我都不應該手動刷新頁面。 為此，我在像波紋管這樣的圖形視圖中使用了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即圖表和搜索欄所有我的視圖都來自布局

更新：

波紋管是顯示給我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);
    }
});