我有this chart从 CSV 获取数据,按其中一列进行旋转,并用线条显示多个时间序列。还使工具提示自动从数据透视列中获取名称。
唯一的问题是日期/时间显示为时间戳。有没有办法将其格式化为看起来更好,就像实际的日期+时间,就像它在 X 轴中的显示方式一样?
我知道我可以指定工具提示的所有值,执行类似的操作
"tooltip": [
{
"field": "date",
"type": "temporal",
"title": "date",
"timeUnit": "utcyearmonthdatehoursminutes"
},
{...}
]
但我希望能够继续使用 "mark": {"type": "rule", "tooltip": {"content": "data"}},
动态获取工具提示字段,如果我添加上面的代码,则只有日期出现在工具提示中。
完整代码如下:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/stocks.csv"},
"width": 400,
"height": 300,
"encoding": {"x": {"field": "date", "type": "temporal"}},
"layer": [
{
"encoding": {
"color": {"field": "symbol", "type": "nominal"},
"y": {"field": "price", "type": "quantitative"}
},
"layer": [
{"mark": "line"},
{"transform": [{"filter": {"param": "hover", "empty": false}}], "mark": "point"}
]
},
{
"transform": [{"pivot": "symbol", "value": "price", "groupby": ["date"]}],
"mark": {"type": "rule", "tooltip": {"content": "data"}},
"encoding": {
"opacity": {
"condition": {"value": 0.3, "param": "hover", "empty": false},
"value": 0
}
},
"params": [{
"name": "hover",
"select": {
"type": "point",
"fields": ["date"],
"nearest": true,
"on": "mouseover",
"clear": "mouseout"
}
}]
}
]
}
最佳答案
您可以在计算转换中设置日期字段的格式并分配新字段,该新字段随后将显示在工具提示中。 只需添加以下转换代码或检查 editor 。有关更多格式或日期表达式,请参阅 https://vega.github.io/vega/docs/expressions
"transform": [
{"pivot": "symbol", "value": "price", "groupby": ["date"]},
{"calculate": "datetime(datum.date)", "as": "convertedDate"},
{
"calculate": "utcFormat(datum.date,'%B %d, %Y')",
"as": "converted as string"
}
],
如果您想更新现有的日期字段,只需在 as
配置中提供日期字段,如下所示:
{"calculate": "datetime(datum.date)", "as": "date"},
关于data-visualization - 在 Vega-lite 中将时间戳格式化为工具提示中的日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67281635/