Highcharts automatische Aktualisierung in asp.net MVC

Question

Ich arbeite auf asp.net MVC 5. Ich habe 4 verschiedene Arten von Diagrammen erstellt, die auf derselben Seite anzeigen. Ich erhalte Daten von einem Meter in einem Intervall von fast 15-20 Sekunden. Alles, was ich tun möchte, ist, meine Diagramme nach jeweils 15/20 Sekunden zu aktualisieren, so dass ich für jeden neuen Eintrag in DB meine Seite nicht manuell aktualisieren sollte. Dazu habe ich wie javascript setInterval in meiner Grafikansicht verwendet unten

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

Bellow sind meine divs, in denen ich legte meine Charts

<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> 

Bei $(window).on('load', function() { } ich meine 4-Charts Initialisierung wie unten platziert haben

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}); 

Alle Daten in Diagrammen kommen in Array-Format

Also nach meiner Seite

wie unten Bild aussehen läuft Nachdem ich Ok drücken i erhalten unten

Ich weiß nicht, warum es passiert, ich möchte nur auffrischen/lade nur die Charts neu, aber ich bekomme die obigen Ergebnisse, da es die gesamte Seite aktualisiert, auch bei der Aktualisierung kann ich meine Charts nicht anzeigen

Außerdem meine Karten werden in einer Ansicht platziert und diese Ansicht wird im Anschluss an die Haupt layout dh sonst Charts und Suchleiste Alle meine Ansicht von Layout

kommt

UPDATE:

Bellow ist das Bild, das mir zeigt, die Daten in result

Jede Hilfe sehr geschätzt würde

Answer 1

Da Sie setInterval verwenden, wiederholt es alles, was in dieser Klausel enthalten ist, fügt das HighChart-Objekt in diesem Objekt hinzu.

Was Sie tun können, ist beforeSend in Ihrer Ajax hinzufügen:

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