Используйте Plot.ly с внешним скриптом для графиков

Question

Я использую Plot.ly.js, чтобы добавить некоторые графики на мой сайт. Я пытаюсь использовать внешний скрипт для рисования графиков, потому что я буду использовать одну и ту же функцию на нескольких разных страницах. В начале моей странице .aspx, у меня есть:

<script src="Scripts/plotly-latest.min.js"></script> 

так, что я могу использовать библиотеку Plot.ly. Во внешнем .js файл, у меня есть функция:

function drawLines() { 
var one = { 
    x: [1,2,3], 
    y: [1,2,3], 
    mode: 'lines+markers', 
    name: 'Sample Data' 
}; 
var data = [one]; 
var layout = { title: 'Sample Graph' }; 
Plotly.newPlot('myDiv', data, layout); 

Если я ставлю, что непосредственно на моей странице .aspx, то он работает отлично, но я действительно хочу, чтобы он быть внешним. Итак, я попытался добавить это где я хочу графа пойти:

<div id="myDiv" style="width: 480px; height: 400px;"> 
    <script src="Scripts/LineCharts.js" type="text/javascript" ></script> 
    <script> 
      drawLines() 
     </script> 
</div> 

Я также попытался поставить строку с SRC = "Сценарии ....> в самом начале, где я делаю, что для Plot.ly Кроме того, ни одна из них не работала: график просто не отображается на странице (но элемент div с пустым пространством есть). Я знаю, что я мог бы легко использовать внешний скрипт, но я просто не знаю, где/как положить его на мою страницу .aspx, чтобы он работал. Я хочу, чтобы он работал, когда страница изначально загружается.

Я понимаю, что это очень простой и, вероятно, глупый вопрос, но Я не работал с этими вещами раньше, и я действительно мог бы помочь.

Answer 1

Когда вы сохраняете свой скрипт как внешний файл, у вас больше нет доступа к HTML-div «myDiv». Вы должны явно получить ссылку на DIV, добавив следующее в начале вашего скрипта:

var myDiv = document.getElementById('myDiv');

и теперь в вашем обращении к Plotly.newPlot вам нужно передать эту саму переменную, а не идентификатор строки , т.е.

Plotly.newPlot(myDiv, data, layout);

Кроме того, это скорее вопрос стиля кодирования, но вы должны вызвать drawLines() во внешнем скрипте, а не в инлайн сценарии внутри HTML.

Надеюсь, это поможет!