如何设置 Vega-Lite 时间序列图表 x 轴的最大值和最小值？
Posted
技术标签:
【中文标题】如何设置 Vega-Lite 时间序列图表 x 轴的最大值和最小值？【英文标题】：How do I set the max and min of the x-axis of Vega-Lite time series chart? 【发布时间】：2020-06-22 16:50:56 【问题描述】：我正在使用 Vega-Lite 制作时间序列图表，我想设置 x 轴的最小值和最大值，而与正在显示的值无关。原因是我在单独的图表中并排显示多个时间序列，并且我希望它们的 x 轴对齐，即使某些序列比其他序列开始得早。
我找到了encoding.x.scale.domain，这似乎是正确使用的属性。 The documentation 表示对于时间字段，这应该是时间戳的两个元素数组。但是，我将其设置为什么似乎并不重要，我的图表没有呈现任何线条，也没有在 x 轴上呈现任何刻度，并且警告Infinite extent for field "data": [Infinity, -Infinity]" 会打印在控制台中。
更令人困惑的是，我已经能够通过以相同方式设置encoding.y.scale.domain 来控制 y 轴。
以下是我在 Vega 编辑器中试验过的图表规范的简化版本。我正在尝试将 x 轴设置为在比实际值更早的时间点开始并在更晚的时间点结束：
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data":
"values": [
"ts": 1500400000000, "v": 1,
"ts": 1500500000000, "v": 2,
"ts": 1500600000000, "v": 3,
"ts": 1500700000000, "v": 2
]
,
"width": 800,
"height": 300,
"mark": "type": "line",
"encoding":
"x": "field": "ts", "type": "temporal", "scale": "domain": [1500000000000, 1500900000000],
"y": "field": "v", "type": "quantitative", "scale": "domain": [0, 5]
如果我删除 encoding.x.scale.domain 属性，它会呈现一行，但在包含它时，我无法找出不会导致警告的任何值。
这甚至是设置 x 轴的最小值和最大值的正确方法吗？为什么它适用于 y 轴而不适用于 x 轴？这样做的正确方法是什么？
【问题讨论】：
【参考方案1】：您尝试的是在 Vega-Lite 中指定时间域的正确方法，但在 Vega-Lite 4.5 中引入的此行为存在错误。这是您使用 Vega-Lite 4.4 的规范结果：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite@4.4"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>
</head>
<body>
<div id="vis"></div>
<script>
var spec =
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data":
"values": [
"ts": 1500400000000, "v": 1,
"ts": 1500500000000, "v": 2,
"ts": 1500600000000, "v": 3,
"ts": 1500700000000, "v": 2
]
,
"width": 800,
"height": 300,
"mark": "type": "line",
"encoding":
"x": "field": "ts", "type": "temporal", "scale": "domain": [1500000000000, 1500900000000],
"y": "field": "v", "type": "quantitative", "scale": "domain": [0, 5]
;
vegaEmbed("#vis", spec);
</script>
</body>
</html>
我已在https://github.com/vega/vega-lite/issues/6060 提交错误报告
【讨论】：
谢谢。问题也已经解决了，太好了。以上是关于如何设置 Vega-Lite 时间序列图表 x 轴的最大值和最小值？的主要内容，如果未能解决你的问题，请参考以下文章