javascript
  • jquery
  • highcharts
  • 2014-11-21 9 views 5 likes 
    5

    Ich habe eine Master-Seite, die in anderen Web-Seiten aufruft jquery.load zum Beispiel unter VerwendungLaden mehr Highchart mit jquery.load

    $("#loading").show(); 
    $("#arena").load('Project.prx?PID=' + dataReport); 
    $("#loading").hide(); 
    

    (Project.prx ist in einer in-house CGI-Sprache wie Coldfusion, und es ist das Abpumpen HTML und JavaScript.)

    im Browser Debugger bekomme ich Fehlermeldungen wie die jedes Mal folgende ich auf einen Link klicken, nämlich

    Uncaught Highcharts error #16: www.highcharts.com/errors/16 
    

    Highcharts websit e sagt dieser Fehler:

    Highcharts Error #16

    Highcharts already defined in the page

    This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file.

    Wie ich jQuerys load() und ziele auf eine div im aktuellen Dokument bin mit, es für Highcharts ein fairer Anruf ist eine zweite Instanz des Anspruchs, dass ich lade Namensraum. Trotzdem möchte ich das tun.

    Also irgendeine Idee, wie man andere Highcharts-Seiten in einen mit einer vorhandenen Instanz des Highcharts-Namespace lädt?

    SPÄTER

    ich einen gewissen Erfolg gehabt haben, mit nicht highcharts in der Steuerung und nur in den Zielen setzen und

    $("#loading").show(); 
    $("#arena").empty(); 
    delete(Highcharts); 
    $("#arena").load('Project.prx?PID=' + dataReport); 
    $("#loading").hide(); 
    

    jedoch Ausgabe hat dies nicht als erfolgreich erwiesen in jedem Fall.

    +5

    Das Problem ist nicht, dass Sie zwei Grafiken, aber zwei Highcharts-Codes laden ... Was ich tun würde, ist das Skript-Tag von Project.prx strippen, um das zu vermeiden. Wenn Sie Project.prx auf einer eigenen Seite anzeigen müssen, fügen Sie das Skript-Tag nur hinzu, wenn die Anfrage kein AJAX-Aufruf ist ... – Salketer

    Antwort

    1

    Am besten laden Sie keine geladenen Dateien. Sie können dies tun, indem Sie Highcharts einmal auf der Hauptseite laden und keine der später geladenen Highcharts-Seiten laden.

    Die zweite Lösung besteht darin, Diagramme in separate Iframes zu setzen.

    Eine andere Möglichkeit besteht darin, die Highcharts-Bibliothek in Highcharts-Seiten in JavaScript zu laden, während Sie 'if' verwenden, um zu überprüfen, ob sie bereits geladen ist.

    1

    It is a fair call for Highcharts to claim that I'm loading a second instance of the namespace. Nevertheless, this is what I want to do.

    Ich glaube nicht, dass tatsächlich ist, was Sie tun wollen. Es gibt keinen Grund, die Highcharts-Bibliothek zweimal zu laden. Sie möchten einfach zwei Diagramme auf derselben Seite laden.

    Die einfache Lösung:

    entfernen <script src="http://code.highcharts.com/highcharts.js"></script> (oder wie Sie diese Datei laden) aus der Ausgabe Ihrer prx Datei. Keine Notwendigkeit, zu nennen Ich glaube nicht, dass diese Linie in diesem Fall überhaupt etwas tut.

    Die etwas robustere Lösung:

    Wenn Sie Project.prx?id=123 der Lage sein müssen Ihren Browser direkt zuzugreifen durch (vielleicht zum Testen), Sie werden feststellen, dass Leistung bis in voller HTML wickeln müssen, je nachdem wie es heißt.

    Moderne Browser enthalten den Header X-Requested-With: XMLHttpRequest, den Sie in Ihrem Servercode testen können, und stellen das Wrapped- oder Upwrapped-Diagramm entsprechend bereit; Allerdings ist diese Methode wirklich nicht zuverlässig. Eine zuverlässigere Lösung wäre, wie Sie es in der Abfragezeichenfolge angeben möchten. Zum Beispiel könnten Sie machen es so, dass Project.prx id = 123 Sie geben:?

    <div id="container"></div> 
    <script type="text/javascript" > 
        $('#container').highcharts({ 
         ... 
        }); 
    </script> 
    

    aber Project.prx id = 123 & v = Test wird Ihnen:

    <!DOCTYPE html> 
    <html> 
    <head> 
        <title>Data Report 123</title> 
        <script src="//code.jquery.com/jquery-2.1.0.js" type="text/javascript" ></script> 
        <script src="http://code.highcharts.com/highcharts.js" type="text/javascript" ></script> 
    </head> 
        <body> 
         <div id="container"></div> 
         <script type="text/javascript" > 
          $('#container').highcharts({ 
          ... 
          }); 
         </script> 
        </body> 
    </html> 
    
    1

    Sie können Project.prx in einen Iframe laden.

    Verwandte Themen