python - Plotly 图在 HTML 页面中显示为空白
问题描述
我正在尝试在 Linux 中使用 Python Plotly 和 Pandas 将图形嵌入到 HTML 页面中。我从用户@Fermin Silva 那里找到了这个答案plotly.offline.plot
,它建议使用将绘图图转换为对象。然后可以将其直接嵌入到 HTML 中。
所以这就是我尝试过的:
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)
当我运行此脚本时,它会完全执行并创建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>
我尝试使用 Firefox 在 Firefox 中运行它firefox test3.html
,但没有出现图表。我知道该块在那里,因为它在我“检查元素”时出现。但它没有渲染 Plotly 图:
我试过在 Windows 的 Chrome 中打开文件,结果是一样的。
在费尔明席尔瓦的回答中,他们提到
请记住,您需要包含 plotly js 文件才能使所有这些图表正常工作。
你可以包括
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
就在把你得到的 div 之前。如果将此js放在页面底部,图表将不起作用。
老实说,我不太明白这一点——我不知道 plotly js 文件是什么意思,也不知道这是否适用于我的设置。尽管如此,我还是尝试在我的 HTML 文件的外部标记之前插入这个片段,然后我尝试将它插入到内部标记之前,如下所示:
尝试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>
尝试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>
并且图表仍然没有显示。
我会感谢任何人花时间解释我做错了什么,以及如何正确地将 Plotly 图输出到 HTML 文件中,以便它显示在本地网页上。
编辑:因此,我发现的一个临时解决方法是使用fig1.write_html(filename, auto_open=False)
创建一个完整的 HTML 文件,然后将该 HTML 文件加载到 BeautifulSoup 并根据需要插入 HTML。我不喜欢它,因为这意味着我有效地围绕图表构建页面,而不是相反,但它至少实现了我在网页上获取图表的目标。
如果有人知道如何修复div
插件,那就太好了。
解决方案
使用图形对象。
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)
推荐阅读
- java - StreamSets 处理器找不到 Redis 库
- c# - ASP.NET Core:有没有办法从 HTML 表单按钮调用方法?
- javascript - 如何使用客户端 JavaScript 模拟人类行为来玩 Flash 游戏?
- python - 为什么 Scrapy Spider 不跟随下一页?
- javascript - 如何在javascript中以数字形式获取选定文本的范围?
- c# - 数组元素获得内存覆盖导致访问冲突异常
- c# - 在 C# .NET 核心的请求标头中,如何检查一个键是否有多个输入?
- github-actions - GitHub 操作构建的最后一个工件的 URL
- codenameone - 代号:iPad 上的选取器不再有任何按钮
- python - 数组中的一个多余元素总是留下