Подсказки в линейных графиках Altair - PullRequest
Новая
       18

Подсказки в линейных графиках Altair

0 голосов
/ 13 ноября 2018

При указании всплывающей подсказки для линейного графика всплывающая подсказка появляется только при наведении курсора на точки вдоль линии, но не при наведении курсора где-либо еще вдоль линии.Это особенно проблематично при использовании нелинейной интерполяции ... Есть ли способ явно установить всплывающие подсказки на самих строках? 

import altair as alt
from vega_datasets import data

source = data.jobs.url

alt.Chart(source).mark_line(interpolate="basis").encode(
    alt.X('year:O'),
    alt.Y('perc:Q', axis=alt.Axis(format='%')),
    color='sex:N',
    tooltip='sex:N'
).properties(
    title='Percent of work-force working as Welders'
).transform_filter(
    alt.datum.job == 'Welder'
)

enter image description here

Ответы [ 2 ]

0 голосов
/ 16 апреля 2019

Если исходить из ответа @ Philipp_Kats и комментария @ dominik (и для всех, кто наткнулся на эту ветку и хочет посмотреть пример кода Altair), текущий способ достижения эффекта «всплывающей подсказки» вдоль строк:

  1. Создать строку (mark_line())
  2. Создать выбор, который выбирает ближайшую точку и выбирает на основе значения x
  3. Зафиксируйте несколько прозрачных селекторов по линии, сообщая значение x в разных позициях линии
  4. Слой (mark_text()) поверх 1 - 3 над

Реальный пример - это линейный график в простом приложении Flask, которое я сделал . Разница лишь в том, что я не делал селекторы прозрачными (opacity=alt.value(0)), но в остальном это линейный график с привязанными подсказками.

Вот воспроизводимый пример с использованием исходного набора данных OP: 

# Step 1: create the line
line = alt.Chart().mark_line(interpolate="basis").encode(
    x=alt.X("year:O"),
    y=alt.Y("perc:Q", axis=alt.Axis(format='%')),
    color='sex:N'
).transform_filter(
    alt.datum.job == 'Welder'
)

# Step 2: Selection that chooses nearest point based on value on x-axis
nearest = alt.selection(type='single', nearest=True, on='mouseover',
                            fields=['year'])


# Step 3: Transparent selectors across the chart. This is what tells us
# the x-value of the cursor
selectors = alt.Chart().mark_point().encode(
    x="year:O",
    opacity=alt.value(0),
).add_selection(
    nearest
)

# Step 4: Add text, show values in Sex column when it's the nearest point to 
# mouseover, else show blank
text = line.mark_text(align='left', dx=3, dy=-3).encode(
    text=alt.condition(nearest, 'sex:N', alt.value(' '))
)

# Layer them all together
chart = alt.layer(line, selectors, text, data=source, width=300)

chart

Итоговый участок:

enter image description here

0 голосов
/ 14 ноября 2018

Я сомневаюсь, что на данный момент существует прямое техническое решение: - (

Одним из обходных решений является явное добавление точек поверх линий, чтобы их было легче навести. Обычно я делаю их относительно большими,но прятаться до события зависания, как здесь Как вишня на вершине, можно использовать Вороного, чтобы показать ближайшую точку в любой заданной точке, как они делают в этом уроке

Дайте мне знать, если вам нужен пример кода Altair, я использовал raw vega, но реализация версии Altair должна быть относительно тривиальной

...