【发布时间】：2021-12-29 09:13:14
【问题描述】：
我正在尝试添加一个允许您更改日期范围的滑块（参见图表截图）。
基础图原代码：
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": {
"text": "Share of Total Net Worth Held by the Top 1%",
"subtitle": "Source: Board of Governors of the Federal Reserve System (US)",
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start",
"color": "black"
},
"data": {
"url": "https://raw.githubusercontent.com/jamieprince/jamieprince.github.io/main/data_FRED-WFRBST01134.json",
"format": {"type": "json", "property": "observations"}
},
"height": 300,
"width": 310,
"mark": "line",
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"title": null,
"axis": {"grid": false}
},
"y": {
"field": "value",
"type": "quantitative",
"title": null,
"axis": {"grid": true}
}
}
}
我是根据我找到的另一个图表来做的，但我似乎无法让它工作
我要模拟的图表代码：
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": {
"text": "Inflation - since 1800",
"subtitle": "RPI: long series: annual percentage change ",
"subtitleFontStyle":"italic",
"subtitleFontSize":10,
"anchor": "start",
"color": "black"
},
"width":300,
"height":300,
"data": {
"name":"myData",
"url": "https://raw.githubusercontent.com/RDeconomist/RDeconomist.github.io/main/charts/ONSinflation/data_MM23-CDSI.json",
"format": {
"type":"json",
"property": "years"
}},
"mark":{
"type": "line",
"color":"#00BFFF",
"strokeWidth":2,
"opacity":1
},
"transform": [
{"filter": "datum.year>minYear"},
{"filter": "datum.year<maxYear"}
],
"params": [
{"name":"minYear", "value":1800,
"bind":{
"input": "range",
"min": 1800,
"max": 2021,
"step": 1,
"name": "Start year:"}
},
{"name":"maxYear", "value":2021,
"bind":{
"input": "range",
"min": 1800,
"max": 2021,
"step": 1,
"name": "End year:"}
}
],
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"title":null
},
"y": {
"field": "value",
"type": "quantitative",
"title":null,
"scale":{
"domain":{
"data": "myData",
"field": "value"}}
}
}
}
我设法让 Vega 创建另一个只有几年的列，但由于某种原因，数据仍然没有出现
提供屏幕截图所示内容的代码
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"autosize": {"type": "fit-x", "contains": "padding"},
"background": "#FFFFFF",
"padding": 5,
"height": 310,
"title": {
"text": "Share of Total Net Worth Held by the Top 1%",
"subtitle": "Source: Board of Governors of the Federal Reserve System (US)",
"subtitleFontStyle": "italic",
"subtitleFontSize": 10,
"anchor": "start",
"color": "black",
"subtitleColor": "black"
},
"style": "cell",
"data": [
{
"name":"myData",
"url": "https://raw.githubusercontent.com/jamieprince/jamieprince.github.io/main/data_FRED-WFRBST01134.json",
"format": {"type": "json", "property": "observations"},
"transform": [
{"type": "formula", "expr": "year(datum.date)", "as": "year"},
{"type": "filter", "expr": "datum.year>=minYear"},
{"type": "filter", "expr": "datum.year<=maxYear"}
]
}
],
"signals": [
{
"name": "width",
"init": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"on": [
{
"update": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"events": "window:resize"
}
]
},
{
"name": "minYear",
"value": 1989,
"bind": {
"input": "range",
"min": 1989,
"max": 2021,
"step": 1,
"name": "Start year: "
}
},
{
"name": "maxYear",
"value": 2021,
"bind": {
"input": "range",
"min": 1989,
"max": 2021,
"step": 1,
"name": "End year: "
}
}
],
"mark": "line",
"encoding": {
"x": {
"field": "year",
"type": "temporal",
"title": null,
"axis": {"grid": false}
},
"y": {
"field": "value",
"type": "quantitative",
"title": null,
"axis": {"grid": true},
"scale":{
"domain":{
"data": "myData",
"field": "value"}}
}
}
}
我真的需要一些帮助，我已经花了几个小时试图弄清楚。我会永远感激不尽
【问题讨论】：
-
你想要你的图表配置在 vega 还是 vega-lite ？因为你的一半配置是 vega 的一部分，另一半是 vega-lite 的一部分