Гистограмма Альтаира - размещение и форматирование этикеток

Question

В продолжение этого вопроса У меня есть два дополнительных варианта для реализации:

1. Установить размещение метки в середине диаграммы, независимо от высоты столбца
2. Метка формата должна отображаться как часть строки, включая круглые скобки

Мой код сейчас выглядит так:

df = pd.DataFrame({'name':['bar','foo'],
                  'presented_value':[2,20],
                  'coloring_value':[1,25]})

base = (alt.Chart(df, height=250, width=375).mark_bar()
 .encode(
    x='name',
    y=alt.Y('presented_value', axis=alt.Axis(orient='right')),
    color='name'
  )
)
bars = base.mark_bar().encode(color=alt.condition(
      alt.datum.presented_value > alt.datum.coloring_value,
      alt.value('lightgreen'),
      alt.value('darkred')
    ))

text_sub_brand = base.mark_text(
    align='center', baseline='bottom', 
    dy=35, fontSize=24
).encode(
    text='presented_value'
)
text_cluster = base.mark_text(
    align='center', baseline='bottom', 
    dy=50, fontSize=16
).encode(
    text='coloring_value'
).transform_calculate(label='"Cluster value: " + datum.coloring_value')


(bars + text_sub_brand + text_cluster).properties(width=700)

Что касается размещения, я пробовал различные параметры MarkDef, используя документы здесь , но не нашел варианта, который позволяет размещать его относительно диаграммы, а не бара. Как видно на изображении выше для панели foo, я бы хотел избежать случаев, когда метка отображается за пределами области оси Y.

Что касается форматирования, я попытался реализовать решение здесь , но в моем случае почему-то не сработало. В идеале я хотел бы, чтобы формат был label='"(" + datum.coloring_value + ")"'), но использование скобок вызывало ошибку JavaScript:

This usually means there's a typo in your chart specification. See the javascript console for the full traceback.

Можно ли это сделать? Спасибо!

Answer 1

Ваш текст имеет кодировку presented_value, поэтому он будет отображаться на диаграмме в соответствии с этим. Если вы хотите, чтобы он находился в постоянном месте на диаграмме, вы можете установить кодировку y на alt.value(pixels_from_top).

Для форматирования вы можете использовать преобразование вычисления, а затем обратиться к этому вычисленному значению в кодировка текста.

В совокупности это выглядит так:

import altair as alt
import pandas as pd

df = pd.DataFrame({'name':['bar','foo'],
                  'presented_value':[2,20],
                  'coloring_value':[1,25]})

base = (alt.Chart(df, height=250, width=375).mark_bar()
 .encode(
    x='name',
    y=alt.Y('presented_value', axis=alt.Axis(orient='right')),
    color='name'
  )
)
bars = base.mark_bar().encode(color=alt.condition(
      alt.datum.presented_value > alt.datum.coloring_value,
      alt.value('lightgreen'),
      alt.value('darkred')
    ))

text_sub_brand = base.mark_text(
    align='center', baseline='bottom', 
    dy=35, fontSize=24
).encode(
    y=alt.value(100),
    text='presented_value'
)
text_cluster = base.mark_text(
    align='center', baseline='bottom', 
    dy=50, fontSize=16
).encode(
    y=alt.value(100),
    text='label:N'
).transform_calculate(label='"(" + datum.coloring_value + ")"')


(bars + text_sub_brand + text_cluster).properties(width=700)