将plot.ly添加到shopify博客

Question

我使用plot.ly 创建了一个交互式绘图，并希望将其集成到 Shopify 博客文章中。

我会做什么：

1. 将代码保存到assets中的.js中

window.PLOTLYENV=window.PLOTLYENV || {};                                    
if (document.getElementById("xxxxxxxxxxxxxxxx")) {                    
  Plotly.newPlot(                        
    "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",                        
    [{"hovertemplate":".......................................................

2. 将其链接到博客 html 或液体中

<script type="text/javascript" src="{{ 'myplot.js' | asset_url }}"></script>

情节不可见...我错过了什么？

Answer 1

您将 Plotly 图表集成到 Shopify 博客文章中所采用的方法基本上是正确的。以下是一些需要检查的事项，可能有助于使绘图正确显示：

确保在脚本之前添加 Plotly 库 docs :

<script src="https://cdn.plot.ly/plotly-2.35.2.min.js" charset="utf-8"></script>

确保 JavaScript 中的 ID 与 HTML 元素匹配

• 在 JavaScript 中：

  Plotly.newPlot("plot-container", data, layout);

• 在您的 HTML 中：

  <div id="plot-container"></div>

包装 Plotly 代码以在页面完全加载后运行：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // your code goes here
    });
</script>