그래프 용 외부 스크립트로 Plot.ly 사용

Question

Plot.ly.js를 사용하여 내 웹 사이트에 그래프를 추가하고 있습니다. 그래프를 그리기 위해 외부 스크립트를 사용하려고합니다. 왜냐하면 여러 페이지에서 같은 함수를 사용할 것이기 때문입니다. 내 .aspx 페이지 시작 부분에 다음과 같이 표시됩니다.

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

Plot.ly 라이브러리를 사용할 수 있도록합니다. 내 .aspx 페이지에서 직접 그 넣을 경우 잘 작동,

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

,하지만 난 정말 외부 될 갖고 싶어 : 외부의 .js 파일에서 내 기능을 가지고있다. 그래서, 나는 그래프 가고 싶은 곳을 추가하는 시도 :

<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"에 액세스 할 수 없습니다. Plotly.newPlot 그 변수 자체를 전달할 필요가 아닌 문자열 ID로 호출 지금

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

: 그리고 당신은 명시 적으로 스크립트의 시작 부분에 다음을 추가하여 DIV에 대한 참조를 얻을 필요 ,이 코딩 스타일의 문제의 더 많은 것이다, 또한

Plotly.newPlot(myDiv, data, layout);

를 즉,하지만 당신은하지 HTML 내 인라인 스크립트, 외부 스크립트에 drawLines()를 호출해야합니다.

희망이 도움이됩니다.