简体繁体 English

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

[英]How do I add a secondary Y axis to my vega-lite chart?

原文 2017-08-10 10:04:58 6 1 vega-lite

This question shows a way to add multiple time series to a vega-lite chart: 这个问题展示了一种向vega-lite图表添加多个时间序列的方法：

How to plot several variables on an axis with Vega-Lite? 如何使用Vega-Lite在轴上绘制几个变量？

Is there a way to put the second series on the secondary Y axis? 有没有办法将第二个系列放在次要Y轴上？ I'm talking about putting another Y axis on the right hand side so that the time series can have different scales but still be compared. 我正在谈论在右侧放置另一个Y轴，以便时间序列可以有不同的比例，但仍然可以进行比较。

The following image demonstrates the kind of chart that I'm after: 下图显示了我所追求的图表类型：

Here is an example chart, please show me how to move the second time series to a new Y axis on the right of the chart: 这是一个示例图表，请告诉我如何将第二个时间序列移动到图表右侧的新Y轴：

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

Update : 更新：

I have partially solved my problem, but not 100%. 我已经部分解决了我的问题，但不是100％。

By adding "axis" and "orient" fields to my vega-lite chart I've been been able to move the second series to the right hand side as you can see here: 通过在我的vega-lite图表中添加“轴”和“方向”字段，我已经能够将第二个系列移动到右侧，如您所见：

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

The problem I'm having now is that the when I try to create a chart like this with two different time series with values on completely different scales I get something that isn't useful. 我现在遇到的问题是，当我尝试使用两个不同的时间序列创建一个这样的图表时，我会得到一些无用的东西。

You can see from this chart that both sides of the chart use the same scale and this makes it impossible to compare the data because the first series (which is on a smaller scale) ends up being completely squashed. 您可以从此图表中看到图表的两侧使用相同的比例，这使得无法比较数据，因为第一个系列（规模较小）最终被完全压扁。

You can see the chart from the screenshot here: 您可以在此处的屏幕截图中查看图表：

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

So the question now is how do I make these axis' independent so the data is overlaid and easily comparable? 所以现在的问题是如何使这些轴独立，以便数据重叠并且易于比较？

(Not that it makes sense to compare the data in this example, but generally I need to be able to do this). （并不是说比较这个例子中的数据是有意义的，但通常我需要能够做到这一点）。

1 个解决方案

Yes, you can set axes and scales to be independent with the resolve property. 是的，您可以将轴和刻度设置为与resolve属性无关。 Vega-Lite will automatically create two axes for you. Vega-Lite将自动为您创建两个轴。

See https://vega.github.io/vega-lite/docs/layer.html#combined-scales-and-guides . 请参阅https://vega.github.io/vega-lite/docs/layer.html#combined-scales-and-guides 。