如何使用标记类型矩形突出显示vega图表中选定日期范围之间的背景颜色区域

问题描述

在折线图中，x 轴我有时间戳，y 轴带有数值，我可以在特定时间段（开始时间和结束时间）之间绘制一条带有数值的线（y 轴）。相反需要突出显示 area 的 line 。尝试使用标记类型 rect 但使用硬编码值 widthenter image description here 和 height，需要通过坐标或其他方式使其动态。

规格：

<div className="app"></div>

解决方法

通过使用矩形标记得到修复。

            "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
                  } 
                } 
            }
            }