将破折号图嵌入到html中
Posted
技术标签:
【中文标题】将破折号图嵌入到html中【英文标题】：Embedding dash plotly graphs into html 【发布时间】：2019-11-09 07:01:47 【问题描述】：我想在我自己的 html 文件中嵌入 Plotly 图。 使用 Dash，我可以在 API 本地服务器中生成相同的图表。
但是对于我自己的 HTML 文件，我没有得到任何解决方案：
我的 Dash 解决方案：
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div(children=[
html.H1(children='Dash Tutorials'),
dcc.Graph(
id='example',
figure=
'data': [
'x': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 'y': [9, 6, 2, 1, 5, 4, 6, 8, 1, 3], 'type': 'bar', 'name': 'Boats',
'x': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 'y': [19, 36, 12, 1, 35, 4, 6, 8, 1, 3], 'type': 'bar', 'name': 'Cars',
],
'layout':
'title': 'Basic graph'
)
])
if __name__ == '__main__':
app.run_server(debug=True)
如何通过 plotly 生成相同的图表以嵌入到我自己的 html 中？
【问题讨论】：
【参考方案1】：只需执行以下 2 个步骤：
1- 生成（通过 python）嵌入到您的 html 文件中的代码
import plotly.graph_objs as go
from plotly.offline import plot
x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
y1 = [9, 6, 2, 1, 5, 4, 6, 8, 1, 3]
y2 = [19, 36, 12, 1, 35, 4, 6, 8, 1, 3]
trace1 = go.Bar(x=x,
y=y1,
name='Boats')
trace2 = go.Bar(x=x,
y=y2,
name='Cars')
data = [trace1, trace2]
layout = go.Layout(title='Title',
xaxis=dict(title='X axis',
tickfont=dict(size=14,
color='rgb(107, 107, 107)'),
tickangle=-45),
yaxis=dict(title='Y axis',
titlefont=dict(size=16,
color='rgb(107, 107, 107)'),
tickfont=dict(size=14,
color='rgb(107, 107, 107)')),)
fig = go.Figure(data=data, layout=layout)
plot(fig,
include_plotlyjs=False,
output_type='div')
你会得到：
<div><div id="d18660f3-1557-43c1-8f27-09292a9a8de7" style="height: 100%; width: 100%;" class="plotly-graph-div"></div><script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV || ;window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("d18660f3-1557-43c1-8f27-09292a9a8de7", ["name": "Boats", "x": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], "y": [9, 6, 2, 1, 5, 4, 6, 8, 1, 3], "type": "bar", "uid": "39c52ed4-e27d-4574-9cec-a3d50a8773a0", "name": "Cars", "x": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], "y": [19, 36, 12, 1, 35, 4, 6, 8, 1, 3], "type": "bar", "uid": "c0b658e9-bd5b-4c65-976d-1e03ba5836a3"], "title": "text": "Title", "xaxis": "tickangle": -45, "tickfont": "color": "rgb(107, 107, 107)", "size": 14, "title": "text": "X axis", "yaxis": "tickfont": "color": "rgb(107, 107, 107)", "size": 14, "title": "font": "color": "rgb(107, 107, 107)", "size": 16, "text": "Y axis", "showLink": false, "linkText": "Export to plot.ly", "plotlyServerURL": "https://plot.ly")</script><script type="text/javascript">window.addEventListener("resize", function()Plotly.Plots.resize(document.getElementById("d18660f3-1557-43c1-8f27-09292a9a8de7")););</script></div>
2- 将生成的代码嵌入到您的 html 文件中
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<h1>Something</h1>
<div><div id="d18660f3-1557-43c1-8f27-09292a9a8de7" style="height: 100%; width: 100%;" class="plotly-graph-div"></div><script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV || ;window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("d18660f3-1557-43c1-8f27-09292a9a8de7", ["name": "Boats", "x": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], "y": [9, 6, 2, 1, 5, 4, 6, 8, 1, 3], "type": "bar", "uid": "39c52ed4-e27d-4574-9cec-a3d50a8773a0", "name": "Cars", "x": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], "y": [19, 36, 12, 1, 35, 4, 6, 8, 1, 3], "type": "bar", "uid": "c0b658e9-bd5b-4c65-976d-1e03ba5836a3"], "title": "text": "Title", "xaxis": "tickangle": -45, "tickfont": "color": "rgb(107, 107, 107)", "size": 14, "title": "text": "X axis", "yaxis": "tickfont": "color": "rgb(107, 107, 107)", "size": 14, "title": "font": "color": "rgb(107, 107, 107)", "size": 16, "text": "Y axis", "showLink": false, "linkText": "Export to plot.ly", "plotlyServerURL": "https://plot.ly")</script><script type="text/javascript">window.addEventListener("resize", function()Plotly.Plots.resize(document.getElementById("d18660f3-1557-43c1-8f27-09292a9a8de7")););</script></div>
</body>
【讨论】：
以上是关于将破折号图嵌入到html中的主要内容，如果未能解决你的问题，请参考以下文章
R语言可视化密度图并在密度图中嵌入图例信息使用geomtextpath包的geom_textdensity函数，将图例（legend）信息嵌入到密度图中