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 =“Scripts ....＆gt;这一行，我也为Plot.ly库做了这个。无论如何，它们都不起作用;图表只是没有' t显示在页面上（但是带有空格的div元素在那里）。我知道我应该能够很容易地使用外部脚本，但我不知道在哪里/如何将它放入我的.aspx页面，以便它工作。我希望它在页面最初加载时运行。

我意识到这是非常基本的，可能是一个愚蠢的问题，但我之前没有使用过这些东西，我真的可以使用一些帮助。

Answer 1

当您将脚本保存为外部文件时，您将无法再访问HTML div＆＃34; myDiv＆＃34;。您需要通过将以下内容添加到脚本的开头来显式获取对div的引用：

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

现在在你对Plotly.newPlot的调用中，你需要传递该变量，而不是字符串id，即

。

Plotly.newPlot(myDiv, data, layout);

此外，这更多是编码样式问题，但您应该在外部脚本中调用drawLines()，而不是在HTML中的内联脚本中调用。

希望这有帮助！

使用Plot.ly和图形的外部脚本

1 个答案: