Plot.lyをグラフの外部スクリプトで使用する

Question

Plot.ly.jsを使用して私のウェブサイトにグラフを追加しています。私はいくつかの異なるページで同じ関数を使用するので、グラフを描画するために外部スクリプトを使用しようとしています。私はPlot.lyライブラリを使用できるように

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

：私の.aspxページの初めに、私はこれを持っています。外部の.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への参照を取得する必要があります：あなたは、その変数自体を渡す必要がPlotly.newPlotへのお電話ではなく、文字列IDで

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

そして今、 、すなわち

Plotly.newPlot(myDiv, data, layout);

また、これはコーディングスタイルの問題の詳細ですが、あなたは、HTMLの中にあなたの外部スクリプトではなく、インラインスクリプトでdrawLines()を呼び出す必要があります。

希望すると便利です。