将多个 Plotly 离线图形加载到 HTML DOM 中

Question

注意工具：使用 Django 3.0，离线绘图，jQuery。

（解决方案后的评论：解决了加载 plotly.offline.plot() 通过不在绘图 div 中包含库的问题。）

我不确定我的工作流程是否需要更改，或者是否有不同的 DOM 操作技术，但我发现在将绘图添加到仪表板时加载时间很慢。 从图中生成的字符串元素非常大，可能是一个因素。 （如果我正确解释了控制台，则为 MB 大小。我是网页设计的新手。）基本上我认为发生的是 jQuery 运行，然后一旦它返回网页“冻结”，同时它尝试添加 DOM 元素。

好的，这是当前的工作流程：

1. 使用 Django 视图加载带有基本要素的 html 页面。 没什么特别的，这很好用。
2. 调用 jQuery 来运行另一个视图。 这个视图需要一段时间来运行计算并进行一些数据操作，这就是我尝试使用 jQuery 的原因。 该视图生成 5-10 个图形图形对象。
3. 将图像插入轮播中以供查看。

如果可能的话，第 3 步确实是我认为需要修复的步骤。 如果没有，是否有替代解决方案？

这是我的 jQuery，我希望可以对其进行改进 - 它位于我的 .html 文档末尾的“script”标签中（就在 '' 标签之前）。

  var my_id = {{ my_id }}; //Django template value needed by plotly
  $( document ).ready(function() {
      var plots_id_tag = "data_plots";//data_plots is my .inner-carousel div element where everything will be inserted

      var elmt = document.getElementById(plots_id_tag);
      var endpoint = elmt.getAttribute("data-url"); //URL of view
      $.ajax({
          url: endpoint,
          data: {
              'my_id': my_id
          },

          success: function (data) {
                var is_first = true;
                var concat_divs = ''
                  //data is a JsonResponse value (serialized)
                  jQuery.each(data, function(item, val) {
                      if (is_first){
                      {#$("#" + plots_id_tag).append("<div class='item active'>" + val + "</div>");#} //Method 1 I tried was appending in loop
                      concat_divs += "<div class='item active'>" + val + "</div>" //Method two I tried was appending into a single long string.
                      is_first = false;
                      }
                      else {
                          {#$("#" + plots_id_tag).append("<div class='item'>" + val + "</div>");#}//Method 1
                          concat_divs += "<div class='item'>" + val + "</div>"//Method 2
                      }

                  })
                  $(elmt).append(concat_divs);//Method 2a
                  $(elmt).innerHTML(concat_divs);//Method 2b This one doesn't show the plots at all. I see html added to the DOM, but nothing gets shown. If this would be faster, is there an update function I need to call?


          }
      });
  })

这是 plotly 的代码生成

def get_plots(df):

#Some data manip here

        layout = go.Layout(yaxis=dict(title='My plot', range=[0, y_lim], showline=True, linewidth=1, linecolor='#41b3f9', gridcolor='#e6e9ed'),
                           xaxis=dict(title=x_dim, showline=True, linewidth=1, linecolor='#41b3f9', gridcolor='#e6e9ed'),
                           title=title,
                           titlefont={'size': 18},
                           showlegend=False,
                           height=500,
                           width=1000,
                           plot_bgcolor='rgba(255,255,255,.3)')
        fig = go.Figure(data=[lower_trace, mid_trace, upper_trace], layout=layout)

        plot_conf = {'showLink': False, 'displayModeBar': False, 'responsive': True}
        div = plot(fig, auto_open=False, output_type='div', config=plot_conf)
        return div

这是我被 jQuery 调用的视图的一部分

        my_plots = []
        for dataframe_to_manip in list_dfs:
          my_plots.append(get_plots(dataframe_to_manip)) #long process

        return JsonResponse(my_plots, safe=False) #list of div elements generated by plotly

如果您需要其他任何信息，请告诉我，但我认为这可以让您了解正在发生的事情。 目标 - 为动态仪表板插入多个绘图图形对象的速度性能。 我想如果我可以缩小可能有帮助的绘图图像的大小。 所以如果你也有建议，那很好。

Answer 1

以防万一有人遇到这个。 似乎 plotly.offline.plot() 默认包含整个 plot.ly.js 库。 所以每个图都有一个库的副本，使我的 html 非常大（MB 大小）

要缩小需要加载的内容，最好使用： plotly.offline.plot(..., include_plotlyjs=False)

在你的 html 中（在你的图表在 html 文档中生成之前 - 所以也许在顶部）你把这一行：

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

这将加载时间从几秒钟加快到几乎是瞬间。

可能有一个 jQuery/js 解决方案，但以上对我有用。