绘图图在 HTML 页面中显示为空白 [英] Plotly graph shows up blank in a HTML page
本文介绍了绘图图在 HTML 页面中显示为空白的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在 Linux 中使用 Python Plotly 和 Pandas 将图形嵌入到 HTML 页面中.我从用户@Fermin Silva 那里找到了
我尝试在 Windows 的 Chrome 中打开文件，结果相同.
在 Fermin Silva 的回答中，他们提到了
<块引用>请记住，您需要为所有这些包含 plotly js 文件图表工作.
你可以包括
就在放置你得到的 div 之前.如果你把这个js放在底部页面，图表将无法工作.
老实说，我真的不明白这一点 - 我不知道 plotly js 文件是什么意思，也不知道这是否适用于我的设置.尽管如此，我尝试在 HTML 文件中的外部标记之前插入此代码段，然后尝试将其插入内部标记之前，如下所示:
尝试 1:
1 <html><head><title>示例图</title></head><body>2 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>3 <div>456 <div id="0e557daa-24ae-4b6f-865a-dbc84f6ede5c";class =plotly-gra ph-div"样式=高度:600px；宽度:100%;"></div>尝试 2:
1 <html><head><title>示例图</title></head><body>2 <div>3 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>456 <div id="0e557daa-24ae-4b6f-865a-dbc84f6ede5c";class =plotly-gra ph-div"样式=高度:600px；宽度:100%;"></div>图形仍然不显示.
如果有人花时间解释我做错了什么，以及如何将 Plotly 图形正确输出到 HTML 文件中，以便它显示在本地网页上，我将不胜感激.
所以，我发现的一个临时解决方法是使用 fig1.write_html(filename, auto_open=False) 创建一个完整的 HTML 文件，然后将该 HTML 文件加载到 BeautifulSoup 中并根据需要插入 HTML.我不喜欢它，因为这意味着我正在有效地围绕图表构建页面，而不是相反，但它至少实现了我在网页上获取图表的目标.
如果有人知道如何修复 div 插入，那就太好了.
解决方案
使用图形对象.
将pandas导入为pd将 numpy 导入为 np导入 chart_studio.plotly 作为 py将袖扣导入为 cf将 seaborn 作为 sns 导入导入 plotly.express 作为 px导入 plotly.graph_objects as goscoreByTeamId = {1: [100, 110, 115, 95, 112, 120, 110, 99], 2: [115, 99, 75, 111, 120, 77, 80, 110], 3: [100, 1102, 115, 99, 99, 100, 134]}teamNamesByTeamId = {1: John", 2: Pete", 3: Edgar"}df_scores = pd.DataFrame(data=scoresByTeamId)fig = go.Figure()对于 scoreByTeamId 中的团队:fig.add_trace(go.Scatter(x=[1,2,3,4,5,6,7,8],y=scoresByTeamId[团队],name=teamNamesByTeamId[team],模式=行+标记"))fig.update_layout(xaxis=dict(title=周"，tickvals=[1,2,3,4,5,6,7,8]),yaxis=dict(title=得分"),标题=每周PPG"；)fig.show() # 这只是为了在浏览器中看到它，以防万一，没有必要.html = fig.to_html(full_html=True, include_plotlyjs=True)打印(html)# 保存html文件filePath="C:\\myFilePath\\myHtmlFile.html";使用 open(filePath, w") 作为 f:f.写(html)I'm attempting to embed a graph into a HTML page using Python Plotly and Pandas, in Linux. I found this answer from user @Fermin Silva, which suggests using plotly.offline.plot to convert a plotly graph into a object. This can then be embedded directly in a 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:
<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. I know that the block is there, because it appears when I "Inspect element". But it's not rendering a Plotly graph:
I've tried opening the file in Chrome in Windows, and it's the same result.
In Fermin Silva's answer, they mentioned
Remember that you'll need to include the plotly js file for all these charts to work.
You could include
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>just before putting the div you got. If you put this js at the bottom of the page, the charts won't work.
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. 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:
Attempt 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:
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.
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. 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.
解决方案
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)
这篇关于绘图图在 HTML 页面中显示为空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
