es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Altair: gráfico faceteado redimensionable

Necesito un gráfico facetado redimensionable, pero width="container" se refiere a los facetas individuales. Lo mejor que he podido obtener es algo de HTML personalizado, pero no funciona correctamente.

rand = np.random.RandomState(0)
data = pd.DataFrame\
    ( rand.randint(100,500,(15,2))
    , index=[*["a"]*5,*["b"]*5,*["c"]*5]
    , columns=["x","y"]
    ).rename_axis("k").reset_index()
chart1 =\
    ( alt.Chart(data)
    . mark_point()
    . encode(x="x",y="y",color="k",shape="k",size="k")
    )
chart2 =\
    ( alt.Chart(data)
    . transform_regression
        ( on="x"
        , regression="y"
        , groupby=["k"]
        , method="poly"
        )
    . mark_line()
    . encode(x="x",y="y",color="k")
    )
chart =\
    ( (chart1 + chart2)
    . properties(height=300, width="container")
    . facet(column="k:N")
    . interactive()
    )
stats.chart_embed\
    ( chart
    , filename="TEMP.html"
    , container=container
    , style=style
    )
container="""<div class="test"><div class="vega-vis"></div></div>"""
style = """
body {
  white-space: nowrap;
}
.vega-vis {
  width: 100%;
}
.test {
  width: 32%;
}
...
"""
Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para crear un gráfico facetado redimensionable, se puede establecer la propiedad width con un valor fijo y envolver el gráfico en un div contenedor con un estilo definido. La propiedad width establecida en container se refiere al ancho de cada faceta individual, no al gráfico completo. En el ejemplo dado, se ha utilizado un HTML personalizado para envolver el gráfico en un div contenedor y establecer el ancho utilizando CSS. Parece que el enfoque del HTML personalizado no funcionó como se esperaba. Otras opciones para crear un gráfico redimensionable incluyen usar la propiedad autosize de Vega-Lite, que redimensiona automáticamente el gráfico según su contenedor, o usar una biblioteca de visualización alternativa como D3.js.

Comments are closed.