在列上拟合图表以创建条形图迷你图答案

【问题标题】：Fit charts on columns to create barchart sparkline在列上拟合图表以创建条形图迷你图
【发布时间】：2020-03-11 13:07:20
【问题描述】：

我正在尝试创建一些条形图迷你图，但我无法正确放入我的列中，并且我无法弄清楚我做错了什么，因为我得到了以下结果，它忽略了我的 plotly 图表：非常感谢

这是这张图片的 MRE

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from plotly.subplots import make_subplots

large_rockwell_template = dict(
    layout=go.Layout(title_font=dict(family="Rockwell", size=24))
)

fig = make_subplots(rows=2, cols=1)

fig.add_trace(
    go.Bar(x=[1, 2, 3], y=[2, 52, 62], name="yaxis data"),
    row=1, col=1)

fig.add_trace(
    go.Bar(x=[1, 2, 3], y=[2, 52, 62], name="yaxis data"),
    row=2, col=1)

fig.update_layout(
    xaxis={
       'title': 'Column',
       'zeroline': False,
       'showgrid': False},
    yaxis={
       'showgrid': False,
       'showline': False,
       'zeroline': False,
       'scaleratio': 0.5},    
    template=large_rockwell_template
)
fig.update_xaxes(visible=False, showgrid=False, zeroline=False)
fig.update_yaxes(visible=False, showgrid=False, zeroline=False)

app.layout = html.Div([html.Div([
                                html.Div([
                                    html.H3('Column 1'),
                                    dcc.Graph(id='g1', figure=fig)
                                ], style={'display': 'inline-block','padding':300,'margin':50,'textAlign':'center'}),

                                html.Div([
                                    html.H3('Column 2'),
                                    dcc.Graph(id='g2', figure=fig)
                                ], style={'display': 'inline-block','padding':300,'textAlign':'center'}),
                            ])
                       ])
if __name__ == '__main__':
    app.run_server(debug=True)

【问题讨论】：

标签： python html css plotly-dash

【解决方案1】：

如果你正在寻找类似的东西，下面是代码。

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from plotly.subplots import make_subplots

app = dash.Dash(__name__)

app.layout = html.Div([html.Div([
                                html.Div([
                                    html.H3('Column 1'),
                                    dcc.Graph(id='g1', 
                                              figure={
                                                        'data': [
                                                            {'x': [1, 2, 3], 'y': [2, 52, 62] , 'type': 'bar','name': 'yaxis data'},
                                                            {'x': [1, 2, 3], 'y': [2, 52, 62] , 'type': 'bar','name': 'yaxis data'},
                                                        ],
                                                    }
                                              ),
                                    dcc.Graph(id='g2-sparkline', 
                                              figure={
                                                        'data': [
                                                            {'x': [1, 2, 3], 'y': [2, 52, 62] , 'type': 'line','name': 'yaxis data'},
                                                        ],
                                                        'layout': {
                                                            'height': 225,
                                                        }
                                                    }
                                              ),

                                ], style = {'display': 'inline-block', 'width': '20%'}) ]) ])

if __name__ == '__main__':
    app.run_server(debug=True)

【讨论】：