如何在一行中显示所有 plotly 图形？

Question

This is my python/flask file.这是我的 python/flask 文件。 I have created two graphs one bar chart and one pie chart.我创建了两张图表，一张条形图和一张饼图。 I just wanted to display my graphs in a single row.我只想在一行中显示我的图表。 How can I achieve that?我怎样才能做到这一点？ Please it would be great to receive some help and I have provided as much details as I could.请获得一些帮助会很棒，我已经提供了尽可能多的细节。 Thanks in advance!!提前致谢！！

# x is the topic list and y is the list of total tweets based on every topic
trace1 = go.Bar(x=x, y=y)
        layout = go.Layout(title="Overall Tweet Count based on the topics", xaxis=dict(title="Topics",),
                           yaxis=dict(title="Tweet Count",), )
data = [trace1]
fig = go.Figure(data=data, layout=layout)
fig_json = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
x=['positive','negative','neutral']
y=[50,70,80]

piel=go.Pie(labels=x,
               values=y,
               hoverinfo='label+value+percent', textinfo='value'
               )
data=[piel]
fig_pie = go.Figure(data=data, layout=layout)
fig_json_pie = json.dumps(fig_pie, cls=plotly.utils.PlotlyJSONEncoder)

return render_template("charts.html",plot=fig_json,plot_pie=fig_json_pie)

This is charts.html这是图表。html

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>My First Dashboard</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <label> Choose the plot type....</label>
            <select class="form-control" id ='first_cat'>
                <option value="Bar">Bar</option>
                <option value="Scatter">Scatter</option>
            </select>
        </div>
        <div class="col-md-6">
            <div class="chart" id="bargraph">
                <script>
                    var graphs = {{plot | safe}};
                    Plotly.plot('bargraph',graphs,{});
                </script>
            </div>
        </div>

        <div class="col-md-6">
            <div class="chart" id="piechart">
                <script>
                    var graphs = {{plot_pie | safe}};
                    Plotly.plot('piechart',graphs,{});
                </script>

            </div>
        </div>
    </div>
</div>
<script src="{{ url_for('static', filename='js/jquery-1.11.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/plot.js') }}"></script>
</body>
</html>

Result:-结果：-

Answer 1

Here you can use make_subplots being carefully to correctly specify subplots-types .在这里，您可以仔细使用make_subplots来正确指定 subplots -types 。 As Example例如

import plotly.graph_objs as go
from plotly.subplots import make_subplots
fig = make_subplots(rows=1, cols=2, specs=[[{"type": "xy"}, {"type":"domain"}]])
fig.add_trace(go.Bar(x=["A", "B", "C"],
                    y=[40,10,30],
                    showlegend=False),
              row=1, col=1)
fig.add_trace(go.Pie(labels=["one", "two"],
                     values=[45,55],
                     domain=dict(x=[0.5, 1.0]),
                     showlegend=False,
                     hoverinfo='label+value+percent', textinfo='value'),
             row=1, col=2)

fig.show()

如何在一行中显示所有 plotly 图形？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-05-08 20:14:41

如何在一行中显示所有 plotly 图形？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-05-08 20:14:41

解决方案1
1 已采纳 2020-05-08 20:14:41