时间戳

首页 > 解决方案 > 在 python 中制作 Plotly 图形移动响应

python - 在 python 中制作 Plotly 图形移动响应

问题描述

我正在尝试使用 python 制作一个 Choropleth 图，以实现移动响应。我使用了元视口标签，并且 config responsive = True 但图表在移动屏幕上显得如此之小。我想让图形变得灵活，这样它就可以占据屏幕的宽度，并在屏幕较小时根据需要替换颜色条。

该图在移动屏幕中显示为here

手机屏幕上的图表

代码生成此图

data = [go.Choropleth(
colorscale = scl,
autocolorscale = False,
locations = us_map['code'],
z = us_map['stat_main'].astype(float),
zmin = 0,
zmax = 100,
locationmode = 'country names',
text = us_map['text'],
hovertemplate = '%{text}',
marker = go.choropleth.Marker(
    line = go.choropleth.marker.Line(
        color = 'rgb(255,255,255)',
        width = 2
    )),

colorbar = go.choropleth.ColorBar(
    title = "Recovery Index"))]

layout = go.Layout(
title = go.layout.Title(
    text = "Some html text", x=0, xanchor='left', y=0.95, yanchor='top'
),
#width=1000,
#height=600,
geo = go.layout.Geo(
    scope = 'world',
    projection = go.layout.geo.Projection(type = 'natural earth'),
    showlakes = True,
    lakecolor = 'rgb(255, 255, 255)'),)

fig1 = go.Figure(data = data, layout = layout)

fig1.update_layout(coloraxis_colorbar=dict(
thicknessmode="pixels", thickness=50,
lenmode="pixels", len=200,
yanchor="top", y=1,
ticks="outside", ticksuffix=" bills",
dtick=5))

combined_html = open('State_Graphs/country_graphs.html', 'w')
combined_html.write("<html><head><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.2, minimum-scale=0.5'><link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' integrity='sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z' crossorigin='anonymous'></head><body> <div class='container'>")
add_js = True

combined_html.write("<div class='row'><div class='col-12' >")
inner_html = plotly.offline.plot(
    fig1, include_plotlyjs=add_js, output_type='div',
    config={'modeBarButtonsToRemove': ['toImage','pan2d', 'lasso2d', 'select2d','autoScale2d','toggleSpikelines',],
            'displaylogo': False,
            'scrollZoom': True,
            'responsive':True,
            'displayModeBar': False}
)
combined_html.write(inner_html)
combined_html.write("</div> </div>")

标签： pythonmobilegraphplotlyresponsive

解决方案

推荐阅读