如何使用标记类型 rect 在 vega 图表中的选定日期范围之间突出显示具有背景颜色的区域
How to highlight area with background color between selected date range in vega chart using marks type rect
在折线图中，我有时间戳的 x 轴和带有数值的 y 轴，我可以在特定时间戳（开始时间和结束时间）之间绘制一条带有数值的线（y 轴） .而不是高亮区域所需的线。尝试使用标记类型 rect 但具有硬编码值 widthenter image description here 和 height，需要通过坐标或其他方式使其动态化。
规格：
{
"$schema":"https://vega.github.io/schema/vega/v5.json",
"autosize":{
"type":"pad",
"resize":true
},
"padding":5,
"width":800,
"height":200,
"style":"",
"signals":[
{
"name":"x3",
"value":1607592500000
},
{
"name":"x2",
"value":1607592500000
},
{
"name":"x",
"value":1607592500000
},
{
"name":"Endtimex3",
"value":1607998500000
},
{
"name":"Endtimex2",
"value":0
},
{
"name":"Endtimex",
"value":0
},
{"name": "nominaly", "value": 4},
{
"name":"y",
"value":0
},
{
"name":"y2",
"value":200
},
{
"name":"strokeWidth",
"value":2
},
{
"name":"strokeCap",
"value":"butt"
},
{
"name":"strokeDash",
"value":[
8,
4
]
},
{
"name":"y3",
"value":60
},
{
"name":"dx",
"value":-15
},
{
"name":"dy",
"value":15
},
{
"name":"angle",
"value":0
},
{
"name":"limit",
"value":0
},
{
"name":"align",
"value":"right"
},
{
"name":"alignleft",
"value":"left"
},
{
"name":"baseline",
"value":"alphabetic"
},
{
"name":"bottom",
"value":"bottom"
},
{
"name": "interpolate", "value": "linear"
},
{ "name": "color", "value": "both"},
{
"name":"anchor",
"value":[
0,
0
],
"on":[
{
"events":"wheel",
"update":"[invert('x', x()), invert('y', y())]"
}
]
},
{
"name":"zoom",
"value":1,
"on":[
{
"events":"wheel!",
"force":true,
"update":"pow(1.001, event.deltaY * pow(16, event.deltaMode))"
}
]
},
{
"name":"xdom",
"update":"xext",
"on":[
{
"events":{
"signal":"zoom"
},
"update":"[time(anchor[0]) + (time(xdom[0]) - time(anchor[0])) * zoom, time(anchor[0]) + (time(xdom[1]) - time(anchor[0])) * zoom]"
}
]
}
],
"data":[
{
"name":"table",
"values": [ {"count":1,"category":"volume","dateTime":1608006600000,"anomalous":true},{"count":2,"category":"volume","dateTime":1608000900000,"anomalous":true},{"count":3,"category":"volume","dateTime":1608011400000,"anomalous":true},{"count":4,"category":"volume","dateTime":1608005700000,"anomalous":true},{"count":7,"category":"volume","dateTime":1608003300000,"anomalous":true},{"count":4,"category":"volume","dateTime":1608000000000,"anomalous":true},{"count":2,"category":"volume","dateTime":1608009000000,"anomalous":true},{"count":6,"category":"volume","dateTime":1608012300000,"anomalous":true},{"count":2,"category":"volume","dateTime":1606959600000,"anomalous":false},{"count":0,"category":"volume","dateTime":1607263800000,"anomalous":false},{"count":0,"category":"volume","dateTime":1607102700000,"anomalous":false},{"count":5,"category":"volume","dateTime":1606971000000,"anomalous":false},{"count":4,"category":"volume","dateTime":1606951200000,"anomalous":false},{"count":6,"category":"volume","dateTime":1607735700000,"anomalous":false},{"count":4,"category":"volume","dateTime":1607971200000,"anomalous":false},{"count":4,"category":"volume","dateTime":1606989000000,"anomalous":false},{"count":5,"category":"volume","dateTime":1607386500000,"anomalous":false},{"count":0,"category":"volume","dateTime":1606834500000,"anomalous":false},{"count":5,"category":"volume","dateTime":1607355300000,"anomalous":false},{"count":4,"category":"volume","dateTime":1606977600000,"anomalous":false},{"count":5,"category":"volume","dateTime":1607243400000,"anomalous":false}]
},
{
"name":"data_0",
"source":"table",
"transform":[
{
"type":"formula",
"expr":"toDate(datum[\"dateTime\"])",
"as":"dateTime"
},
{
"type":"extent",
"field":"dateTime",
"signal":"xext"
}
]
}
],
"marks":[
{
"type": "rect",
"encode": {
"enter": {
"fill": {"value": "#939597"},
"stroke": {"value": "#652c90"}
},
"update": {
"x": {"signal": "x", "scale":"x"},
"y": {"signal": "y"},
"width": {"signal": "280"},
"height": {"signal": "100"},
"opacity": {"value": 1},
"strokeWidth": {"signal": "strokeWidth"},
"fillOpacity": {"signal": "1"},
"strokeOpacity": {"signal": "0"}
},
"hover": {
"opacity": {"value": 0.5}
}
}
},
{
"type":"rule",
"clip":true,
"encode":{
"enter":{
"stroke":{
"value":"red"
}
},
"update":{
"x":{
"signal":"x",
"scale":"x"
},
"y":{
"signal":"y"
},
"x2":{
"signal":"x2",
"scale":"x"
},
"y2":{
"signal":"y2"
},
"strokeWidth":{
"signal":"strokeWidth"
},
"strokeDash":{
"signal":"strokeDash"
},
"strokeCap":{
"signal":"strokeCap"
},
"opacity":{
"value":1
}
},
"hover":{
"opacity":{
"value":0.5
}
}
}
},
{
"type":"rule",
"clip":true,
"encode":{
"enter":{
"stroke":{
"value":"red"
}
},
"update":{
"x":{
"signal":"Endtimex3",
"scale":"x"
},
"y":{
"signal":"y"
},
"x2":{
"signal":"Endtimex3",
"scale":"x"
},
"y2":{
"signal":"y2"
},
"strokeWidth":{
"signal":"strokeWidth"
},
"strokeDash":{
"signal":"strokeDash"
},
"strokeCap":{
"signal":"strokeCap"
},
"opacity":{
"value":1
}
},
"hover":{
"opacity":{
"value":0.5
}
}
}
},
{
"type":"text",
"clip":true,
"encode":{
"enter":{
"fill":{
"value":"black"
},
"text":{
"value":"Anomaly Start Time"
}
},
"update":{
"opacity":{
"value":1
},
"x":{
"signal":"x3",
"scale":"x"
},
"y":{
"signal":"y3"
},
"dx":{
"signal":"dx"
},
"angle":{
"signal":"angle"
},
"align":{
"signal":"align"
},
"baseline":{
"signal":"baseline"
},
"limit":{
"signal":"limit"
}
},
"hover":{
"opacity":{
"value":0.5
}
}
}
},
{
"type":"text",
"clip":true,
"encode":{
"enter":{
"fill":{
"value":"black"
},
"text":{
"value":"Anomaly End Time"
}
},
"update":{
"opacity":{
"value":1
},
"x":{
"signal":"Endtimex3",
"scale":"x"
},
"y":{
"signal":"y3"
},
"dx":{
"signal":"dy"
},
"angle":{
"signal":"angle"
},
"align":{
"signal":"alignleft"
},
"baseline":{
"signal":"baseline"
},
"limit":{
"signal":"limit"
}
},
"hover":{
"opacity":{
"value":0.5
}
}
}
},
{
"type":"text",
"clip":true,
"encode":{
"enter":{
"fill":{
"value":"black"
},
"text":{
"value":"Nominal Volume"
}
},
"update":{
"opacity":{
"value":1
},
"x":{
"signal":"x3",
"scale":"x"
},
"y":{
"signal":"nominaly",
"scale": "y"
},
"dx":{
"signal":"dy"
},
"angle":{
"signal":"angle"
},
"align":{
"signal":"alignleft"
},
"baseline":{
"signal":"bottom"
},
"limit":{
"signal":"limit"
}
},
"hover":{
"opacity":{
"value":0.5
}
}
}
},
{
"type":"rule",
"clip":true,
"encode":{
"enter":{
"stroke":{
"value":"grey"
}
},
"update":{
"x":{
"signal":"x3",
"scale":"x"
},
"y":{
"signal":"nominaly",
"scale": "y"
},
"x2":{
"signal":"Endtimex3",
"scale":"x"
},
"y2":{
"signal":"nominaly",
"scale": "y"
},
"width": {"signal": "100"},
"height": {"signal": "150"},
"strokeWidth":{
"signal":"strokeWidth"
},
"strokeDash":{
"signal":"strokeDash"
},
"strokeCap":{
"signal":"strokeCap"
},
"opacity":{
"value":1
}
},
"hover":{
"opacity":{
"value":0.5
}
}
}
},
{
"name":"pathgroup",
"type":"group",
"clip":true,
"from":{
"facet":{
"name":"faceted_path_main",
"data":"data_0",
"groupby":[
"category"
]
}
},
"encode":{
"update":{
"width":{
"field":{
"group":"width"
}
},
"height":{
"field":{
"group":"height"
}
}
}
},
"marks":[
{
"name":"marks",
"type":"line",
"style":[
"line"
],
"sort":{
"field":"datum[\"dateTime\"]",
"order":"descending"
},
"from":{
"data":"faceted_path_main"
},
"encode":{
"update":{
"interpolate":{
"signal":"interpolate"
},
"opacity":[
{
"value":0.7
}
],
"stroke":[
{
"scale":"color",
"field":"category"
}
],
"tooltip":{
"signal":"{\"Time\": timeFormat(datum[\"dateTime\"], '%b %d, %Y %H:%M'), \"Count\": format(datum[\"count\"], \"\"), \"category\": ''+datum[\"category\"]}"
},
"x":{
"scale":"x",
"field":"dateTime"
},
"y":{
"scale":"y",
"field":"count"
},
"defined":{
"signal":"datum[\"dateTime\"] !== null && !isNaN(datum[\"dateTime\"]) && datum[\"count\"] !== null && !isNaN(datum[\"count\"])"
}
}
}
}
]
}
],
"scales":[
{
"name":"x",
"type":"time",
"domain":{
"data":"data_0",
"field":"dateTime"
},
"range":[
0,
{
"signal":"width"
}
]
},
{
"name":"y",
"type":"linear",
"domain":{
"data":"data_0",
"field":"count"
},
"range":[
{
"signal":"height"
},
0
],
"nice":true,
"zero":true
},
{
"name":"color",
"type":"ordinal",
"domain":{
"data":"data_0",
"field":"category",
"sort":true
},
"range":{
"scheme":"accent"
}
}
],
"axes":[
{
"scale":"x",
"orient":"bottom",
"grid":false,
"title":"Time(5 minutes window)",
"labelFlush":true,
"labelOverlap":true,
"labelSeparation":10,
"tickCount":{
"signal":"ceil(width/10)"
},
"titleColor":"black",
"labelColor":"black",
"zindex":1,
"encode":{
"labels":{
"update":{
"text":{
"signal":"timeFormat(datum.value, '%b %d, %Y %H:%M')"
}
}
}
}
},
{
"scale":"y",
"orient":"left",
"grid":false,
"title":"Count",
"labelOverlap":true,
"labelSeparation":10,
"tickCount":{
"signal":"ceil(height/40)"
},
"titleColor":"black",
"labelColor":"black",
"zindex":1
}
],
"legends":[
{
"stroke":"color",
"title":"",
"titleColor":"black",
"labelColor":"black",
"orient":"top-left",
"encode":{
"symbols":{
"name":"legendSymbol",
"interactive":true,
"update":{
"fill":{
"value":"transparent"
},
"strokeWidth":{
"value":2
},
"opacity":[
{
"value":0.7
}
],
"size":{
"value":64
}
}
},
"labels":{
"name":"legendLabel",
"interactive":true,
"update":{
"opacity":[
{
"value":1
}
]
}
}
}
}
],
"config":{
"axisY":{
"minExtent":30
}
}
}
通过使用矩形标记得到修复。
"type":"rect",
"encode":{
"enter":{
"x":{
"scale":"x",
"signal":"x3"
},
"x2":{
"scale":"x",
"signal":"Endtimex3"
},
"y":{
"value":0
},
"y2":{
"signal":"height"
} ,
"fill":{
"value":"red"
},
"stroke":{
"value":"red"
},
"strokeWidth":{
"value":1
},
"fillOpacity":{
"value":1
},
"opacity":{
"value":0.1
}
}
}
}
在折线图中，我有时间戳的 x 轴和带有数值的 y 轴，我可以在特定时间戳（开始时间和结束时间）之间绘制一条带有数值的线（y 轴） .而不是高亮区域所需的线。尝试使用标记类型 rect 但具有硬编码值 widthenter image description here 和 height，需要通过坐标或其他方式使其动态化。
规格：
{
"$schema":"https://vega.github.io/schema/vega/v5.json",
"autosize":{
"type":"pad",
"resize":true
},
"padding":5,
"width":800,
"height":200,
"style":"",
"signals":[
{
"name":"x3",
"value":1607592500000
},
{
"name":"x2",
"value":1607592500000
},
{
"name":"x",
"value":1607592500000
},
{
"name":"Endtimex3",
"value":1607998500000
},
{
"name":"Endtimex2",
"value":0
},
{
"name":"Endtimex",
"value":0
},
{"name": "nominaly", "value": 4},
{
"name":"y",
"value":0
},
{
"name":"y2",
"value":200
},
{
"name":"strokeWidth",
"value":2
},
{
"name":"strokeCap",
"value":"butt"
},
{
"name":"strokeDash",
"value":[
8,
4
]
},
{
"name":"y3",
"value":60
},
{
"name":"dx",
"value":-15
},
{
"name":"dy",
"value":15
},
{
"name":"angle",
"value":0
},
{
"name":"limit",
"value":0
},
{
"name":"align",
"value":"right"
},
{
"name":"alignleft",
"value":"left"
},
{
"name":"baseline",
"value":"alphabetic"
},
{
"name":"bottom",
"value":"bottom"
},
{
"name": "interpolate", "value": "linear"
},
{ "name": "color", "value": "both"},
{
"name":"anchor",
"value":[
0,
0
],
"on":[
{
"events":"wheel",
"update":"[invert('x', x()), invert('y', y())]"
}
]
},
{
"name":"zoom",
"value":1,
"on":[
{
"events":"wheel!",
"force":true,
"update":"pow(1.001, event.deltaY * pow(16, event.deltaMode))"
}
]
},
{
"name":"xdom",
"update":"xext",
"on":[
{
"events":{
"signal":"zoom"
},
"update":"[time(anchor[0]) + (time(xdom[0]) - time(anchor[0])) * zoom, time(anchor[0]) + (time(xdom[1]) - time(anchor[0])) * zoom]"
}
]
}
],
"data":[
{
"name":"table",
"values": [ {"count":1,"category":"volume","dateTime":1608006600000,"anomalous":true},{"count":2,"category":"volume","dateTime":1608000900000,"anomalous":true},{"count":3,"category":"volume","dateTime":1608011400000,"anomalous":true},{"count":4,"category":"volume","dateTime":1608005700000,"anomalous":true},{"count":7,"category":"volume","dateTime":1608003300000,"anomalous":true},{"count":4,"category":"volume","dateTime":1608000000000,"anomalous":true},{"count":2,"category":"volume","dateTime":1608009000000,"anomalous":true},{"count":6,"category":"volume","dateTime":1608012300000,"anomalous":true},{"count":2,"category":"volume","dateTime":1606959600000,"anomalous":false},{"count":0,"category":"volume","dateTime":1607263800000,"anomalous":false},{"count":0,"category":"volume","dateTime":1607102700000,"anomalous":false},{"count":5,"category":"volume","dateTime":1606971000000,"anomalous":false},{"count":4,"category":"volume","dateTime":1606951200000,"anomalous":false},{"count":6,"category":"volume","dateTime":1607735700000,"anomalous":false},{"count":4,"category":"volume","dateTime":1607971200000,"anomalous":false},{"count":4,"category":"volume","dateTime":1606989000000,"anomalous":false},{"count":5,"category":"volume","dateTime":1607386500000,"anomalous":false},{"count":0,"category":"volume","dateTime":1606834500000,"anomalous":false},{"count":5,"category":"volume","dateTime":1607355300000,"anomalous":false},{"count":4,"category":"volume","dateTime":1606977600000,"anomalous":false},{"count":5,"category":"volume","dateTime":1607243400000,"anomalous":false}]
},
{
"name":"data_0",
"source":"table",
"transform":[
{
"type":"formula",
"expr":"toDate(datum[\"dateTime\"])",
"as":"dateTime"
},
{
"type":"extent",
"field":"dateTime",
"signal":"xext"
}
]
}
],
"marks":[
{
"type": "rect",
"encode": {
"enter": {
"fill": {"value": "#939597"},
"stroke": {"value": "#652c90"}
},
"update": {
"x": {"signal": "x", "scale":"x"},
"y": {"signal": "y"},
"width": {"signal": "280"},
"height": {"signal": "100"},
"opacity": {"value": 1},
"strokeWidth": {"signal": "strokeWidth"},
"fillOpacity": {"signal": "1"},
"strokeOpacity": {"signal": "0"}
},
"hover": {
"opacity": {"value": 0.5}
}
}
},
{
"type":"rule",
"clip":true,
"encode":{
"enter":{
"stroke":{
"value":"red"
}
},
"update":{
"x":{
"signal":"x",
"scale":"x"
},
"y":{
"signal":"y"
},
"x2":{
"signal":"x2",
"scale":"x"
},
"y2":{
"signal":"y2"
},
"strokeWidth":{
"signal":"strokeWidth"
},
"strokeDash":{
"signal":"strokeDash"
},
"strokeCap":{
"signal":"strokeCap"
},
"opacity":{
"value":1
}
},
"hover":{
"opacity":{
"value":0.5
}
}
}
},
{
"type":"rule",
"clip":true,
"encode":{
"enter":{
"stroke":{
"value":"red"
}
},
"update":{
"x":{
"signal":"Endtimex3",
"scale":"x"
},
"y":{
"signal":"y"
},
"x2":{
"signal":"Endtimex3",
"scale":"x"
},
"y2":{
"signal":"y2"
},
"strokeWidth":{
"signal":"strokeWidth"
},
"strokeDash":{
"signal":"strokeDash"
},
"strokeCap":{
"signal":"strokeCap"
},
"opacity":{
"value":1
}
},
"hover":{
"opacity":{
"value":0.5
}
}
}
},
{
"type":"text",
"clip":true,
"encode":{
"enter":{
"fill":{
"value":"black"
},
"text":{
"value":"Anomaly Start Time"
}
},
"update":{
"opacity":{
"value":1
},
"x":{
"signal":"x3",
"scale":"x"
},
"y":{
"signal":"y3"
},
"dx":{
"signal":"dx"
},
"angle":{
"signal":"angle"
},
"align":{
"signal":"align"
},
"baseline":{
"signal":"baseline"
},
"limit":{
"signal":"limit"
}
},
"hover":{
"opacity":{
"value":0.5
}
}
}
},
{
"type":"text",
"clip":true,
"encode":{
"enter":{
"fill":{
"value":"black"
},
"text":{
"value":"Anomaly End Time"
}
},
"update":{
"opacity":{
"value":1
},
"x":{
"signal":"Endtimex3",
"scale":"x"
},
"y":{
"signal":"y3"
},
"dx":{
"signal":"dy"
},
"angle":{
"signal":"angle"
},
"align":{
"signal":"alignleft"
},
"baseline":{
"signal":"baseline"
},
"limit":{
"signal":"limit"
}
},
"hover":{
"opacity":{
"value":0.5
}
}
}
},
{
"type":"text",
"clip":true,
"encode":{
"enter":{
"fill":{
"value":"black"
},
"text":{
"value":"Nominal Volume"
}
},
"update":{
"opacity":{
"value":1
},
"x":{
"signal":"x3",
"scale":"x"
},
"y":{
"signal":"nominaly",
"scale": "y"
},
"dx":{
"signal":"dy"
},
"angle":{
"signal":"angle"
},
"align":{
"signal":"alignleft"
},
"baseline":{
"signal":"bottom"
},
"limit":{
"signal":"limit"
}
},
"hover":{
"opacity":{
"value":0.5
}
}
}
},
{
"type":"rule",
"clip":true,
"encode":{
"enter":{
"stroke":{
"value":"grey"
}
},
"update":{
"x":{
"signal":"x3",
"scale":"x"
},
"y":{
"signal":"nominaly",
"scale": "y"
},
"x2":{
"signal":"Endtimex3",
"scale":"x"
},
"y2":{
"signal":"nominaly",
"scale": "y"
},
"width": {"signal": "100"},
"height": {"signal": "150"},
"strokeWidth":{
"signal":"strokeWidth"
},
"strokeDash":{
"signal":"strokeDash"
},
"strokeCap":{
"signal":"strokeCap"
},
"opacity":{
"value":1
}
},
"hover":{
"opacity":{
"value":0.5
}
}
}
},
{
"name":"pathgroup",
"type":"group",
"clip":true,
"from":{
"facet":{
"name":"faceted_path_main",
"data":"data_0",
"groupby":[
"category"
]
}
},
"encode":{
"update":{
"width":{
"field":{
"group":"width"
}
},
"height":{
"field":{
"group":"height"
}
}
}
},
"marks":[
{
"name":"marks",
"type":"line",
"style":[
"line"
],
"sort":{
"field":"datum[\"dateTime\"]",
"order":"descending"
},
"from":{
"data":"faceted_path_main"
},
"encode":{
"update":{
"interpolate":{
"signal":"interpolate"
},
"opacity":[
{
"value":0.7
}
],
"stroke":[
{
"scale":"color",
"field":"category"
}
],
"tooltip":{
"signal":"{\"Time\": timeFormat(datum[\"dateTime\"], '%b %d, %Y %H:%M'), \"Count\": format(datum[\"count\"], \"\"), \"category\": ''+datum[\"category\"]}"
},
"x":{
"scale":"x",
"field":"dateTime"
},
"y":{
"scale":"y",
"field":"count"
},
"defined":{
"signal":"datum[\"dateTime\"] !== null && !isNaN(datum[\"dateTime\"]) && datum[\"count\"] !== null && !isNaN(datum[\"count\"])"
}
}
}
}
]
}
],
"scales":[
{
"name":"x",
"type":"time",
"domain":{
"data":"data_0",
"field":"dateTime"
},
"range":[
0,
{
"signal":"width"
}
]
},
{
"name":"y",
"type":"linear",
"domain":{
"data":"data_0",
"field":"count"
},
"range":[
{
"signal":"height"
},
0
],
"nice":true,
"zero":true
},
{
"name":"color",
"type":"ordinal",
"domain":{
"data":"data_0",
"field":"category",
"sort":true
},
"range":{
"scheme":"accent"
}
}
],
"axes":[
{
"scale":"x",
"orient":"bottom",
"grid":false,
"title":"Time(5 minutes window)",
"labelFlush":true,
"labelOverlap":true,
"labelSeparation":10,
"tickCount":{
"signal":"ceil(width/10)"
},
"titleColor":"black",
"labelColor":"black",
"zindex":1,
"encode":{
"labels":{
"update":{
"text":{
"signal":"timeFormat(datum.value, '%b %d, %Y %H:%M')"
}
}
}
}
},
{
"scale":"y",
"orient":"left",
"grid":false,
"title":"Count",
"labelOverlap":true,
"labelSeparation":10,
"tickCount":{
"signal":"ceil(height/40)"
},
"titleColor":"black",
"labelColor":"black",
"zindex":1
}
],
"legends":[
{
"stroke":"color",
"title":"",
"titleColor":"black",
"labelColor":"black",
"orient":"top-left",
"encode":{
"symbols":{
"name":"legendSymbol",
"interactive":true,
"update":{
"fill":{
"value":"transparent"
},
"strokeWidth":{
"value":2
},
"opacity":[
{
"value":0.7
}
],
"size":{
"value":64
}
}
},
"labels":{
"name":"legendLabel",
"interactive":true,
"update":{
"opacity":[
{
"value":1
}
]
}
}
}
}
],
"config":{
"axisY":{
"minExtent":30
}
}
}
通过使用矩形标记得到修复。
"type":"rect",
"encode":{
"enter":{
"x":{
"scale":"x",
"signal":"x3"
},
"x2":{
"scale":"x",
"signal":"Endtimex3"
},
"y":{
"value":0
},
"y2":{
"signal":"height"
} ,
"fill":{
"value":"red"
},
"stroke":{
"value":"red"
},
"strokeWidth":{
"value":1
},
"fillOpacity":{
"value":1
},
"opacity":{
"value":0.1
}
}
}
}