Как я могу отобразить все графические изображения в одной строке? - PullRequest
Новая
       14

Как я могу отобразить все графические изображения в одной строке?

1 голос
/ 08 мая 2020

Это мой файл python / flask. Я создал два графика: одну гистограмму и одну диаграмму p ie. Я просто хотел вывести свои графики в одну строку. Как я могу этого добиться? Было бы здорово получить помощь, и я предоставил как можно больше деталей. Заранее спасибо !! 

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

Это графики. 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

1 Ответ

1 голос
/ 08 мая 2020

Здесь вы можете использовать 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

...