如何从Vega-Lite图表数据源中动态设置图表标题？

你可以通过Vega-Lite的表达式语法直接从数据源中提取标题，实现类似SQL取首条数据的逻辑。以下是具体实现方式：

原示例代码 #

{"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"quater":"1", "sales":"100", "title":"charttitle"},
{"quater":"2", "sales":"200", "title":"charttitle"},
{"quater":"3", "sales":"300", "title":"charttitle"},
{"quater":"4", "sales":"400", "title":"charttitle"}
]
},

"mark": "bar",
"encoding": {
"x": {"field": "quater", "type":"ordinal"},
"y": {"field": "sales", "type": "quantitative"},
},
"title": ???
}

用户参考的伪代码逻辑 #

"title": (select title from data limit 1); -- 类SQL写法
-- 或标准SQL写法
"title": (select top 1 title from data)

实现方案 #

在Vega-Lite中，你可以使用表达式语法直接引用数据集的第一条记录的title字段。将"title": ???替换为以下内容：

"title": {"text": {"expr": "data('source_0')[0].title"}}

完整示例代码 #

{"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"quater":"1", "sales":"100", "title":"charttitle"},
{"quater":"2", "sales":"200", "title":"charttitle"},
{"quater":"3", "sales":"300", "title":"charttitle"},
{"quater":"4", "sales":"400", "title":"charttitle"}
]
},

"mark": "bar",
"encoding": {
"x": {"field": "quater", "type":"ordinal"},
"y": {"field": "sales", "type": "quantitative"},
},
"title": {"text": {"expr": "data('source_0')[0].title"}}
}

说明 #

• data('source_0')：Vega-Lite默认会将第一个数据源命名为source_0，如果你的数据源有自定义名称，替换成对应的名称即可。
• [0]：取数据集中的第一条记录。
• .title：提取该记录中的title字段值作为图表标题。

内容的提问来源于stack exchange，提问作者Joerg55