自定义牛郎星图表中的工具提示

2022-03-15 00:00:00 python altair google-colaboratory

问题描述

我正在使用Google Colab学习Python。在这个Google Colab notebook I've built for demostration中,我能够获得一些JSON数据,并使用Altair将其可视化。

这是我到目前为止获得的图表图像-您可以与linked Google Colab notebook中的数据交互,也可以直接与vega-editor ready with the sample data中的数据交互:

下面是对我拥有的数据和我想要显示的内容的说明:

在游戏王!TCG,牌来自某一套牌。每套牌中都有怪兽、法术和陷阱牌,以及其他类型的牌,如:链接怪兽、XYZ怪兽等。

怪物卡片的普通JSON结构(-这里-有ATK和DEF)有以下JSON结构:

{
   "id":89631139,
   "name":"Blue-Eyes White Dragon",
   "type":"Normal Monster",
   "atk":3000,
   "def":2500,
   "level":8,
   "race":"Dragon",
   "attribute":"LIGHT",
   "archetype":"Blue-Eyes"
}

但是,非怪物牌(即法术牌)在ATK和DEF属性中都没有值:

示例:

{
   "id":35261759,
   "name":"Pot of Desires",
   "type":"Spell Card",
   "race":"Normal",
   "archetype":"Greed"
}

我要在图表中可视化卡片集中的每一张卡片,当光标悬停在一个点上(悬停)时,它将显示卡片的详细信息,如(名称、ATK、DEF(如果有)和卡片类型)。

所需工具提示示例:

经过反复试验、研究和阅读文档后,我遇到了以下问题,不知道是否有可能得到这样的结果:

  • 当您将鼠标悬停在没有ATK和DEF的点上时-(见图1)=如何修改牛郎星图表的设置以满足构建工具提示的条件?-见图1:

图片1:

在";image 1";中,名为";Pot of Desires";的牌是一张咒语牌=它没有ATK或DEF,我已使用invalid property为显示的Nulll/None/NaN值配置了图表),并将Altair设置为这些缺失值的默认值。

(非怪物卡的)中的预期输出为:

名称:欲望罐

类型:拼写卡片

(对于怪物卡)中的预期输出为:

名称:蓝眼白龙

ATK:3000-DEF:2500

类型:正常怪兽

(对于链接怪兽卡=HasATK,但没有DEF)中的预期输出为:

名称:代理龙

ATK:3000

类型:链接怪兽

我想了解一下在这些情况下如何构建工具提示,可以吗?


解决方案

我认为这是不可能的,请参见https://github.com/vega/vega-tooltip/issues/251。总而言之,Vega和VegaToolTip似乎确实从工具提示中删除了Undefined字段,但VegaLite强制在工具提示中显示这些字段(请将this VegaLite spec与this Vega one进行比较)。他们似乎正在寻求帮助来实现您想要的功能。

下面是一个包含数据的示例,它说明了nullUndefined值如何显示在工具提示中:

df = pd.DataFrame([{
   "id":89631139,
   "name":"Blue-Eyes White Dragon",
   "type":"Normal Monster",
   "atk":3000,
   "def":2500,
   "level":8,
   "race":"Dragon",
   "attribute":"LIGHT",
   "archetype":"Blue-Eyes"
},
{
   "id":35261759,
   "name":"Pot of Desires",
   "type":"Spell Card",
   "race":"Normal",
   "archetype":"Greed"
}])

alt.Chart(df).mark_point(tooltip={'content': 'data'}).encode(
    x='name',
    y='type'
).transform_calculate(
   A = "isValid(datum.atk) ? datum.atk : 'Undefined'",
   D = "isValid(datum.def) ? datum.def : 'Undefined'"
)

相关文章