将 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="Scripts....> 的行放在开头，我也为 Plot.ly 库这样做。无论如何，它们都不起作用；图表只是没有出现在页面上（但是带有空白 space 的 div 元素在那里）。我知道我应该能够很容易地使用外部脚本，但我就是不知道 where/how 将它放入我的 .aspx 页面以便它工作。我希望它在页面最初加载时运行。

我意识到这是一个非常基本的问题，可能是一个愚蠢的问题，但我以前没有处理过这些事情，我真的需要一些帮助。

Answer 1

当您将脚本保存为外部文件时，您将无法再访问 HTML div "myDiv"。您需要通过在脚本开头添加以下内容来明确获取对 div 的引用：

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

现在，在调用 Plotly.newPlot 时，您需要传递该变量本身，而不是字符串 ID，即

Plotly.newPlot(myDiv, data, layout);

此外，这更像是一个编码风格问题，但您应该在外部脚本中调用 drawLines()，而不是在 HTML.

中的内联脚本中调用

希望对您有所帮助！

将 Plot.ly 与图表的外部脚本一起使用

Use Plot.ly with external script for graphs

javascript

asp.net

plotly