如何在不重新加载网页的情况下使用离线 Plotly 和 Pyramid 更新绘图？

Question

我正在尝试根据网页上的某些用户选择重新加载离线 Plotly 图表。我正在使用 Pyramid 生成网页。捕获用户输入后，我使用以下 jQuery 为 div 生成内容：

$.getJSON("{{ request.route_url('park_list') }}" + "feature_plot/feature_ids=" + ids_string, function(data) {
    document.getElementById("plotly").innerHTML = data.result;
});

getJSON 的第一个参数基于 Jinja2 模板，其中检索到 url。那里的输出是一个带有 "result" key/value 对的 json 字典。该值是 div 内容，即 Plotly 图表。然后我尝试将其插入到名为 "plotly".

的 div 容器中

问题是没有插入任何东西。我看到一个宽度为 0 的空块，如果我尝试修复宽度，这是成功的，但仍然没有可见内容。

我的问题是：在不重新加载页面的情况下动态更新离线 Plotly 的正确方法是什么？

Answer 1

使用 Firefox Web 开发人员控制台 > 网络选项卡检查生成的 HTTP 响应负载。很可能它不是 JSON 或者它不包含 result 属性，使得 getJSON 失败。

对于 ghetto 调试你也可以这样做：

console.log(data);

... 在尝试插入 HTML.

之前

此外，如果您的目标只是通过 AJAX 调用替换页面上的 HTML 元素，结果 HTML 在服务器端呈现，您可以简单地执行以下操作：

$.get(url, function(html) {
    $("#myelem").replace(html);
});

如何在不重新加载网页的情况下使用离线 Plotly 和 Pyramid 更新绘图？

How to use offline Plotly and Pyramid to update a plot without reloading the webpage?

javascript

python

jquery

pyramid

plotly