如何在具有相同比例的 2 个系列的 vega-lite 中添加辅助 Y 轴?
How do I add secondary Y axis in vega-lite with 2 series having the same scale?
我正在尝试构建这样的东西:
example histogram with multiple independent series
我有 2 个独立的 y 轴,左右方向。
使用 "orient":"right"
的所有 series/layers 应共享相同的比例,使用 "orient":"left"
的所有 series/layers 应共享相同的比例。
我知道 "resolve"
选项 as documented here but having read this 和其他一些我找不到我的特定用例的问题。
到目前为止我徒劳的尝试是这样的:
example in online editor
example screenshot
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {"url": "data/movies.json"},
"transform":[
{"calculate":"datum.Production_Budget * 0.5","as":"y2"}
],
"layer":[
{
"mark": "bar",
"encoding": {
"x": {
"bin": true,
"field": "IMDB_Rating",
"type": "quantitative"
},
"y": {
"axis":{"orient":"left","title":"# of movies","grid":false},
"aggregate": "count",
"type": "quantitative"
}
}},
{
"mark": "line",
"encoding": {
"x": {
"bin": true,
"field": "IMDB_Rating",
"type": "quantitative"
},
"y": {
"field":"Production_Budget",
"aggregate": "average",
"type": "quantitative",
"axis":{"orient":"right","format":"s","title":"avg production budget in $"}
}
}
},
{
"mark": "line",
"encoding": {
"x": {
"bin": true,
"field": "IMDB_Rating",
"type": "quantitative"
},
"y": {
"field":"y2",
"aggregate": "average",
"type": "quantitative",
"axis":{"orient":"right","format":"s","title":"avg production budget in $"}
}
}
}
]
,"resolve": {
"scale":{"y":"independent"}
}
}
我试过使用解析选项:
"resolve": {
"scale":{"axisLeft":"independent"}
}
"resolve": {
"axisLeft":{"y":"independent"}
}
"resolve": {
"axis":{"left":"independent"}
}
但其中 none 有效。
您可以通过在图层中创建图层来实现此目的:两个 orient: "right"
图表在一个图层中具有共享轴,orient: "left"
图表具有独立比例:
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {"url": "data/movies.json"},
"transform": [{"calculate": "datum.Production_Budget * 0.5", "as": "y2"}],
"layer": [
{
"mark": "bar",
"encoding": {
"x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
"y": {
"axis": {"orient": "left", "title": "# of movies", "grid": false},
"aggregate": "count",
"type": "quantitative"
}
}
},
{
"layer": [
{
"mark": "line",
"encoding": {
"x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
"y": {
"field": "Production_Budget",
"aggregate": "average",
"type": "quantitative",
"axis": {
"orient": "right",
"format": "s",
"title": "avg production budget in $"
}
}
}
},
{
"mark": "line",
"encoding": {
"x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
"y": {
"field": "y2",
"aggregate": "average",
"type": "quantitative",
"axis": {
"orient": "right",
"format": "s",
"title": "avg production budget in $"
}
}
}
}
]
}
],
"resolve": {"scale": {"y": "independent"}}
}
我正在尝试构建这样的东西: example histogram with multiple independent series
我有 2 个独立的 y 轴,左右方向。
使用 "orient":"right"
的所有 series/layers 应共享相同的比例,使用 "orient":"left"
的所有 series/layers 应共享相同的比例。
我知道 "resolve"
选项 as documented here but having read this
到目前为止我徒劳的尝试是这样的: example in online editor example screenshot
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {"url": "data/movies.json"},
"transform":[
{"calculate":"datum.Production_Budget * 0.5","as":"y2"}
],
"layer":[
{
"mark": "bar",
"encoding": {
"x": {
"bin": true,
"field": "IMDB_Rating",
"type": "quantitative"
},
"y": {
"axis":{"orient":"left","title":"# of movies","grid":false},
"aggregate": "count",
"type": "quantitative"
}
}},
{
"mark": "line",
"encoding": {
"x": {
"bin": true,
"field": "IMDB_Rating",
"type": "quantitative"
},
"y": {
"field":"Production_Budget",
"aggregate": "average",
"type": "quantitative",
"axis":{"orient":"right","format":"s","title":"avg production budget in $"}
}
}
},
{
"mark": "line",
"encoding": {
"x": {
"bin": true,
"field": "IMDB_Rating",
"type": "quantitative"
},
"y": {
"field":"y2",
"aggregate": "average",
"type": "quantitative",
"axis":{"orient":"right","format":"s","title":"avg production budget in $"}
}
}
}
]
,"resolve": {
"scale":{"y":"independent"}
}
}
我试过使用解析选项:
"resolve": {
"scale":{"axisLeft":"independent"}
}
"resolve": {
"axisLeft":{"y":"independent"}
}
"resolve": {
"axis":{"left":"independent"}
}
但其中 none 有效。
您可以通过在图层中创建图层来实现此目的:两个 orient: "right"
图表在一个图层中具有共享轴,orient: "left"
图表具有独立比例:
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {"url": "data/movies.json"},
"transform": [{"calculate": "datum.Production_Budget * 0.5", "as": "y2"}],
"layer": [
{
"mark": "bar",
"encoding": {
"x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
"y": {
"axis": {"orient": "left", "title": "# of movies", "grid": false},
"aggregate": "count",
"type": "quantitative"
}
}
},
{
"layer": [
{
"mark": "line",
"encoding": {
"x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
"y": {
"field": "Production_Budget",
"aggregate": "average",
"type": "quantitative",
"axis": {
"orient": "right",
"format": "s",
"title": "avg production budget in $"
}
}
}
},
{
"mark": "line",
"encoding": {
"x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
"y": {
"field": "y2",
"aggregate": "average",
"type": "quantitative",
"axis": {
"orient": "right",
"format": "s",
"title": "avg production budget in $"
}
}
}
}
]
}
],
"resolve": {"scale": {"y": "independent"}}
}