堆栈内存溢出
  简体   繁体   English

Plotly 图在 HTML 页面中显示为空白

[英]Plotly graph shows up blank in a HTML page

 原文  2020-10-12 10:37:44  1   2    python/ html/ plotly

问题描述

I'm attempting to embed a graph into a HTML page using Python Plotly and Pandas, in Linux.我正在尝试在 Linux 中使用 Python Plotly 和 Pandas 将图形嵌入到 HTML 页面中。 I found this answer from user @Fermin Silva, which suggests using plotly.offline.plot to convert a plotly graph into a object.我从用户@Fermin Silva 那里找到了这个答案，它建议使用plotly.offline.plot将 plotly 图转换为对象。 This can then be embedded directly in a HTML.然后可以将其直接嵌入到 HTML 中。

So here's what I tried:所以这就是我尝试过的：

  1 import pandas as pd
  2 import plotly.graph_objs as go
  3 from plotly import tools
  4 import plotly
  5 import plotly.express as px
  6 
  7 data = {'Weekday': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  8         'Val': [4, 5, 9, 14, 26, 6, 14]}
  9 
 10 df = pd.DataFrame(data)
 11 
 12 fig1 = px.line(df, x='Weekday', y='Val')
 13 div = plotly.offline.plot(fig1, include_plotlyjs=False, output_type='div')  
 14 
 15 title = 'Example graph'
 16 
 17 html = '<html><head><title>{0}</title></head><body>{1}</body></html>'.format(title, div)
 18  
 19 with open('test3.html', 'w') as fw:
 20     fw.write(html)

When I run this script, it executes fully and creates the test3.html file, with the following contents:当我运行此脚本时，它会完全执行并创建test3.html文件，其中包含以下内容：

<html>
      <head>
            <title>Example graph</title>
      </head>
      <body>
            <div>
        
        
            <div id="0e557daa-24ae-4b6f-865a-dbc84f6ede5c" class="plotly-graph-div" style="height:600px; width:100%;"></div>
            <script type="text/javascript">
                
                    window.PLOTLYENV=window.PLOTLYENV || {};
                    
                if (document.getElementById("0e557daa-24ae-4b6f-865a-dbc84f6ede5c")) {
                    Plotly.newPlot(
                        '0e557daa-24ae-4b6f-865a-dbc84f6ede5c',
                        [{"hoverlabel": {"namelength": 0}, "hovertemplate": "Weekday=%{x}<br>Val=%{y}", "legendgroup": "", "line": {"color": "#636efa", "dash": "solid"}, "mode": "lines", "name": "", "showlegend": false, "type": "scatter", "x": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], "xaxis": "x", "y": [4, 5, 9, 14, 26, 6, 14], "yaxis": "y"}],
                        {"height": 600, "legend": {"tracegroupgap": 0}, "margin": {"t": 60}, "template": {"data": {"bar": [{"error_x": {"color": "#2a3f5f"}, "error_y": {"color": "#2a3f5f"}, "marker": {"line": {"color": "#E5ECF6", "width": 0.5}}, "type": "bar"}], "barpolar": [{"marker": {"line": {"color": "#E5ECF6", "width": 0.5}}, "type": "barpolar"}], "carpet": [{"aaxis": {"endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f"}, "baxis": {"endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f"}, "type": "carpet"}], "choropleth": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "choropleth"}], "contour": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "contour"}], "contourcarpet": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "contourcarpet"}], "heatmap": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "heatmap"}], "heatmapgl": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "heatmapgl"}], "histogram": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "histogram"}], "histogram2d": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2d"}], "histogram2dcontour": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "histogram2dcontour"}], "mesh3d": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "type": "mesh3d"}], "parcoords": [{"line": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "parcoords"}], "scatter": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatter"}], "scatter3d": [{"line": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatter3d"}], "scattercarpet": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattercarpet"}], "scattergeo": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattergeo"}], "scattergl": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattergl"}], "scattermapbox": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scattermapbox"}], "scatterpolar": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatterpolar"}], "scatterpolargl": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatterpolargl"}], "scatterternary": [{"marker": {"colorbar": {"outlinewidth": 0, "ticks": ""}}, "type": "scatterternary"}], "surface": [{"colorbar": {"outlinewidth": 0, "ticks": ""}, "colorscale": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "type": "surface"}], "table": [{"cells": {"fill": {"color": "#EBF0F8"}, "line": {"color": "white"}}, "header": {"fill": {"color": "#C8D4E3"}, "line": {"color": "white"}}, "type": "table"}]}, "layout": {"annotationdefaults": {"arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": 1}, "colorscale": {"diverging": [[0, "#8e0152"], [0.1, "#c51b7d"], [0.2, "#de77ae"], [0.3, "#f1b6da"], [0.4, "#fde0ef"], [0.5, "#f7f7f7"], [0.6, "#e6f5d0"], [0.7, "#b8e186"], [0.8, "#7fbc41"], [0.9, "#4d9221"], [1, "#276419"]], "sequential": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]], "sequentialminus": [[0.0, "#0d0887"], [0.1111111111111111, "#46039f"], [0.2222222222222222, "#7201a8"], [0.3333333333333333, "#9c179e"], [0.4444444444444444, "#bd3786"], [0.5555555555555556, "#d8576b"], [0.6666666666666666, "#ed7953"], [0.7777777777777778, "#fb9f3a"], [0.8888888888888888, "#fdca26"], [1.0, "#f0f921"]]}, "colorway": ["#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52"], "font": {"color": "#2a3f5f"}, "geo": {"bgcolor": "white", "lakecolor": "white", "landcolor": "#E5ECF6", "showlakes": true, "showland": true, "subunitcolor": "white"}, "hoverlabel": {"align": "left"}, "hovermode": "closest", "mapbox": {"style": "light"}, "paper_bgcolor": "white", "plot_bgcolor": "#E5ECF6", "polar": {"angularaxis": {"gridcolor": "white", "linecolor": "white", "ticks": ""}, "bgcolor": "#E5ECF6", "radialaxis": {"gridcolor": "white", "linecolor": "white", "ticks": ""}}, "scene": {"xaxis": {"backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white"}, "yaxis": {"backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white"}, "zaxis": {"backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white"}}, "shapedefaults": {"line": {"color": "#2a3f5f"}}, "ternary": {"aaxis": {"gridcolor": "white", "linecolor": "white", "ticks": ""}, "baxis": {"gridcolor": "white", "linecolor": "white", "ticks": ""}, "bgcolor": "#E5ECF6", "caxis": {"gridcolor": "white", "linecolor": "white", "ticks": ""}}, "title": {"x": 0.05}, "xaxis": {"automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "zerolinecolor": "white", "zerolinewidth": 2}, "yaxis": {"automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "zerolinecolor": "white", "zerolinewidth": 2}}}, "xaxis": {"anchor": "y", "domain": [0.0, 0.98], "title": {"text": "Weekday"}}, "yaxis": {"anchor": "x", "domain": [0.0, 1.0], "title": {"text": "Val"}}},
                        {"responsive": true}
                    )
                };
                
            </script>
            </div>
       </body>
</html>

I try running this in Firefox using firefox test3.html , and no graph appears.我尝试使用firefox test3.html在 Firefox 中运行它，但没有出现图表。 I know that the block is there, because it appears when I "Inspect element".我知道该块在那里，因为它在我“检查元素”时出现。 But it's not rendering a Plotly graph:但它没有渲染 Plotly 图：

在此处输入图像描述

I've tried opening the file in Chrome in Windows, and it's the same result.我试过在 Windows 的 Chrome 中打开文件，结果是一样的。

In Fermin Silva's answer, they mentioned在费尔明席尔瓦的回答中，他们提到

Remember that you'll need to include the plotly js file for all these charts to work.请记住，您需要包含 plotly js 文件才能使所有这些图表正常工作。

You could include你可以包括

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

just before putting the div you got.就在把你得到的 div 之前。 If you put this js at the bottom of the page, the charts won't work.如果将此js放在页面底部，图表将不起作用。

Honestly, I don't really understand this - I don't know what is meant by the plotly js file, nor whether this applies to my setup.老实说，我不太明白这一点——我不知道 plotly js 文件是什么意思，也不知道这是否适用于我的设置。 Nonetheless, I tried inserting this snippet before the outer tag in my HTML file, and then I tried inserting it before the inner tag, like so:尽管如此，我还是尝试在我的 HTML 文件的外部标记之前插入这个片段，然后我尝试将它插入到内部标记之前，如下所示：

Attempt 1:尝试1：

  1 <html><head><title>Example graph</title></head><body>    
  2  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>                   
  3         <div>
  4 
  5 
  6             <div id="0e557daa-24ae-4b6f-865a-dbc84f6ede5c" class="plotly-gra    ph-div" style="height:600px; width:100%;"></div>

Attempt 2:尝试2：

  1 <html><head><title>Example graph</title></head><body>                       
  2         <div>
  3  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  4 
  5 
  6             <div id="0e557daa-24ae-4b6f-865a-dbc84f6ede5c" class="plotly-gra    ph-div" style="height:600px; width:100%;"></div>

And the graph still doesn't display.并且图表仍然没有显示。

I would appreciate anyone taking the time to explain what I'm doing wrong, and how I can correctly output a Plotly graph into a HTML file, so that it displays on a local webpage.我会感谢任何人花时间解释我做错了什么，以及如何正确地将 Plotly 图输出到 HTML 文件中，以便它显示在本地网页上。

EDIT: So, a temporary workaround that I've found is to use fig1.write_html(filename, auto_open=False) to create a whole HTML file, then load that HTML file into BeautifulSoup and insert HTML as appropriate.编辑：因此，我发现的一个临时解决方法是使用fig1.write_html(filename, auto_open=False)创建一个完整的 HTML 文件，然后将该 HTML 文件加载到 BeautifulSoup 并根据需要插入 HTML。 I don't like it, because it means I'm effectively building a page around a graph, rather than the reverse, but it at least achieves my aim of getting a graph on a webpage.我不喜欢它，因为这意味着我有效地围绕图表构建页面，而不是相反，但它至少实现了我在网页上获取图表的目标。

If anyone knows how to fix the div insert, that would be great.如果有人知道如何修复div插入，那就太好了。

2 个解决方案

解决方案1
 0  2021-01-20 20:27:51

Use Graph Objects.使用图形对象。

import pandas as pd
import numpy as np
import chart_studio.plotly as py
import cufflinks as cf
import seaborn as sns
import plotly.express as px

import plotly.graph_objects as go

scoresByTeamId = {1: [100, 110, 115, 95, 112, 120, 110, 99], 2: [115, 99, 75, 111, 120, 77, 80, 110], 3: [100, 105, 102, 115, 99, 99, 100, 134]}
teamNamesByTeamId = {1: "John", 2: "Pete", 3: "Edgar"}
df_scores = pd.DataFrame(data=scoresByTeamId)

fig = go.Figure()

for team in scoresByTeamId:
    fig.add_trace(go.Scatter(x=[1,2,3,4,5,6,7,8],
                            y=scoresByTeamId[team],
                            name=teamNamesByTeamId[team],
                            mode="lines+markers"))

fig.update_layout(
    xaxis=dict(title="Week",
                tickvals=[1,2,3,4,5,6,7,8]),
    yaxis=dict(title="Points Scored"),
    title="PPG by Week"
)

fig.show() # this is just to see it in browser in case you want to, it isn't necessary.
html = fig.to_html(full_html=True, include_plotlyjs=True)
print(html)

# save html file
filePath="C:\\myFilePath\\myHtmlFile.html"
with open(filePath, "w") as f:
    f.write(html)

解决方案2
 0  2022-05-26 09:01:20

try this: from试试这个：从

include_plotlyjs=False

to至

include_plotlyjs=True

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 HTML页面已加载，但显示为空白 - HTML Page Loads, but shows up blank 散点图未显示在HTML（Python）中 - Plotly graph not showing up in HTML (Python) Python创建的简单HTML / Javascript页面显示为空白 - Simple HTML/Javascript page created by Python shows as blank Juypter 笔记本显示空白页 - Juypter notebook shows blank page Tensorboard 在 Chrome 中显示空白页面 - Tensorboard shows blank page in Chrome plotly-dash 显示空白网页 - plotly-dash showing blank web page Plotly：导出到 HTML 后的空白等值线 map - Plotly: Blank choropleth map after exporting to HTML 运行程序时图形不显示（PLOTLY） - Graph Not Showing Up when running program (PLOTLY) Python plotly write_html：将图形集成到具有附加内容的新页面中 - Python plotly write_html: Integrate graph into a new page with additional content How to get the python plotly line graph on a web page by calling the python script through HTML? - How to get the python plotly line graph on a web page by calling the python script through HTML?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM