如何在我的 vega-lite 图表中添加辅助 Y 轴？

Posted 2023-02-16

【中文标题】如何在我的 vega-lite 图表中添加辅助 Y 轴？

【英文标题】：How do I add a secondary Y axis to my vega-lite chart?

【发布时间】：2018-01-18 12:30:21

【问题描述】：

这个问题展示了一种将多个时间序列添加到 vega-lite 图表的方法：

How to plot several variables on an axis with Vega-Lite?

有没有办法将第二个系列放在辅助 Y 轴上？我说的是在右侧放置另一个 Y 轴，以便时间序列可以有不同的比例，但仍然可以进行比较。

下图展示了我所追求的图表类型：

这是一个示例图表，请告诉我如何将第二个时间序列移动到图表右侧的新 Y 轴：

https://vega.github.io/editor/#/gist/vega-lite/ashleydavis/3dbd3b83f2a67da8fe20ef444fd4958e

更新：

我已经部分解决了我的问题，但不是 100%。

通过在我的 vega-lite 图表中添加“轴”和“方向”字段，我已经能够将第二个系列移到右侧，如您在此处看到的：

https://vega.github.io/editor/#/gist/vega-lite/ashleydavis/5aea58ee98c2eec9913b309836181a5b

我现在遇到的问题是，当我尝试用两个不同的时间序列创建一个这样的图表时，我得到了一些没有用的东西。

您可以从此图表中看到图表的两侧使用相同的比例，这使得无法比较数据，因为第一个系列（比例较小）最终被完全压扁。

您可以在此处从屏幕截图中看到图表：

https://vega.github.io/editor/#/gist/vega-lite/ashleydavis/af1958d3f22bd876959ebcc97105dd14

所以现在的问题是如何使这些轴独立，以便数据重叠并易于比较？

（在这个例子中比较数据没有意义，但通常我需要能够做到这一点）。

【问题讨论】：

也许@schuemax 的 Vega 方法可以移植到 Vega Lite - ***.com/a/31280900/1990647

这就是我所追求的，虽然我不知道如何将它翻译成 Vega Lite。

【参考方案1】：

是的，您可以使用resolve 属性将轴和比例设置为独立。 Vega-Lite 会自动为您创建两个轴。

见https://vega.github.io/vega-lite/docs/layer.html#combined-scales-and-guides。

【讨论】：

我在将其设置为答案之前对其进行了测试，结果在这里：vega.github.io/editor/#/gist/vega-lite/ashleydavis/…

如何将它与vega.github.io/vega-lite/examples/… 中所示的缩放和平移选项结合使用？好像不支持。如果我添加选择节点，则会收到有关图层节点的错误。

有谁知道这在 voyageur2 中是否可行？