Question

我正在使用Flask，Bootstrap4和Bokeh开发仪表板。但是，我无法通过bokeh获得稳定的响应式设计。我有八个选项卡，每两个散景图。这些选项卡通过javaScript隐藏，因此可以选择一个选项卡，它将显示出来。响应性仅适用于默认的可见选项卡。因此，对于第一个选项卡，图将调整为给定的大小。但是，对于其他选项卡（相同的css，相同的html），这些图不限于给定的css边界，而是像它们所居住的div那样实际占据更大的空间。而且，一旦我回到默认的“可见”选项卡，这些图也会失去响应能力，并表现得与其他所有图一样。

我正在使用大小调整模式：“同时拉伸”并通过CSS限制图的高度。

如果有人能指出我的解决方案，我将不胜感激。干杯拉尔斯

这是我的绘图代码：

def plottingto(dataframe, lineID, plotnametext ):

    names = lineID

    source = ColumnDataSource(data={
    'date'      : dataframe['date'],
    'time'      : dataframe['time'],
    'index'     : dataframe.index,
    'pendeltime_To_Real': dataframe['pendeltime_To_Real'],
    'pendeltime_To': dataframe['pendeltime_To'],
    'pendeltime_Back_Real': dataframe['pendeltime_Back_Real'],
    'pendeltime_back': dataframe['pendeltime_back'],
    'delay_to': dataframe['delay_to'],
    'delay_back': dataframe['delay_back'],
    })

    hover_tool = HoverTool(tooltips=[('Uhrzeit', '@time'),('Pendelzeit', '@pendeltime_To_Real'),('Verzögerung','@delay_to')], names=names)
    tools = [hover_tool, ResetTool(), BoxZoomTool()] #WheelZoomTool(), PanTool(),

    #Bokeh Plott Rückweg Live Today
    p = figure(plot_height=320, x_axis_type="datetime", y_range=(26, 60),tools=tools, sizing_mode="scale_width")
    p.line(x='index', y='pendeltime_To_Real',line_width=1, line_color="#7db800", legend="Echte Pendelzeit", name=names[0], source=source)
    p.line(x='index', y='pendeltime_To', line_width=1, line_color="red", legend="Durchschnittliche Pendelzeit", source=source)
    p.toolbar.logo = None
    plotname = file_html(p, CDN, plotnametext)
    return plotname

这是我的CSS（除了bootstrap4）：

.fixed_height{
      height:380px;
      padding-bottom: 30px;
      margin-bottom: 50px;
}

这是我的html：

    <div class="row mainrow">
        <button class="accordion">
            <h3 class="headingfullrow">STATISTIKEN ZUM PENDELFENSTER</h3>
        </button>
        <div class="panel">
            <div class="container">
                <div class="row">
                    <div class="col-sm diagrambox">
                        <div class="x_title">
                            <h2>Verkehrslage letzte 7 Werktage Hinweg</h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_panel tile fixed_height overflow_hidden">
                            {{BOKEHWEEKTO | safe}}
                        </div>
                    </div>
                    <div class="col-sm diagrambox">
                        <div class="x_title">
                            <h2>Verkehrslage letzte 7 Werktage Rückweg</h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_panel tile fixed_height overflow_hidden">
                            {{BOKEHWEEKBACK | safe}}
                        </div>
                    </div>
                </div>
            </div>

散景-Flask和Bootstrap4的问题响应设计

0 个答案: