asp.net MVC中的Highcharts自动刷新

Question

我正在开发asp.net MVC 5.我在其中创建了4种不同类型的图表，这些图表在同一页面上查看。我以几乎15-20秒的间隔从仪表获取数据。我想要做的就是在每个15/20秒之后刷新我的图表，这样对于DB中的每个新条目我都不应该手动刷新我的页面。为此，我在图表视图中使用javascript setInterval，如bellow

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之后，即图表和搜索栏，我的所有视图都来自布局

更新

Bellow是显示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);
    }
});