如何在单个行中显示所有绘图图？

问题描述 投票：0回答：1

这是我的python / flask文件。我创建了两个图，一个条形图和一个饼图。我只想在一行中显示图表。我该如何实现？请获得一些帮助，这将是非常不错的，我已提供了尽可能多的详细信息。预先感谢！

# 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)

这是Charts.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>

结果：-

enter image description here

python html jinja2 plotly
1个回答
0
投票

这里您可以谨慎地使用make_subplots正确指定subplots-types。例如]

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()

enter image description here
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.