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

    У меня есть мастер-страница, которая вызывает в других веб-страницах с помощью jquery.load, напримерЗагрузка несколько Highcharts с jquery.load

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

    (Project.prx в камеральном языке CGI, как ColdFusion, и это выкачивание HTML и JavaScript.)

    В браузере отладчика я получаю сообщение об ошибке, как следующий каждый раз, когда я нажимаю на ссылку, а именно

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

    Highcharts websit е говорят об этой ошибке:

    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.

    Как я использую нагрузки Jquery() и ориентируюсь на DIV в текущем документе, является справедливым призывом Highcharts утверждать, что я загружаю второй экземпляр класса Пространство имен. Тем не менее, это то, что я хочу сделать.

    Значит, любая идея загрузки других страниц Highcharts в один с существующим экземпляром пространства имен Highcharts?

    СПУСТЯ

    Я имел некоторый успех не прикладывая Highcharts в контроллере и только в мишенях и выдачи

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

    Однако это не оказалось успешным в каждом случае.

    +5

    Проблема заключается не в том, что вы загружаете два графика, а два кода с высоким кодом ... Что бы я сделал, это удалить тег сценария из Project.prx, чтобы этого избежать. Если вам нужно отображать Project.prx на странице самостоятельно, добавьте только тег сценария, если запрос не является вызовом AJAX ... – Salketer

    ответ

    1

    Лучше всего было бы не загружать загруженные файлы. Вы можете сделать это, загрузив Highcharts один раз на главной странице и не загружаясь ни на одну из более поздних загруженных страниц Highcharts.

    Второе решение - разместить диаграммы в отдельных фреймах.

    Другой способ - загрузить библиотеку Highcharts в JavaScript на страницах Highcharts, используя «if», чтобы проверить, не загружена ли она.

    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.

    Я не думаю, что на самом деле является то, что вы хотите сделать. Никогда не бывает необходимости загружать библиотеку highcharts дважды. Вы просто хотите загрузить две диаграммы на одной странице.

    Простое решение:

    Удалить <script src="http://code.highcharts.com/highcharts.js"></script> (или же вы загрузите этот файл) из выходного файла PRX. Не нужно звонить delete(Highcharts); Я не думаю, что в этом случае даже строка ничего не делает.

    Немного более надежное решение:

    Если вы должны быть в состоянии получить доступ к Project.prx?id=123 непосредственно через браузер (возможно, для тестирования), вам нужно обернуть этот вывод в полной HTML в зависимости от того, как это называется.

    Современные браузеры будут включать в себя заголовок X-Requested-With: XMLHttpRequest, который вы можете проверить в своем серверном коде и предоставить соответственно завернутую или перевернутую диаграмму; однако этот метод действительно не является надежным. Более надежным решением было бы указать, как вы хотите его в строке запроса. Например, вы могли бы сделать так, чтобы Project.prx ID = 123 даст вам:?

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

    но Project.prx ID = 123 & v = тест даст вам:

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

    Вы можете загрузить Project.prx в iframe.

    Смежные вопросы