Question

我正在尝试构建如下内容： example histogram with multiple independent series

我有2个独立的y轴，方向分别为左和右。

使用"orient":"right"的所有系列/图层应共享相同的比例，并且使用"orient":"left"的所有系列/图层应共享相同的比例。

我知道"resolve"选项as documented here，但是阅读了How do I add a secondary Y axis to my vega-lite chart?和其他一些问题之后，我找不到自己的特殊用例。

到目前为止，我徒劳的尝试看起来像这样： 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选项：

"resolve": {
"scale":{"axisLeft":"independent"}

}

"resolve": {
"axisLeft":{"y":"independent"}

}

  "resolve": {
"axis":{"left":"independent"}

}

但它们都不起作用。

Answer 1

您可以通过在层中创建一个层来实现：在具有共享轴的单个层中的两个orient: "right"图表，以及具有独立比例的orient: "left"图表：

vega editor link

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

如何在具有相同比例的2系列vega-lite中添加次要Y轴？

1 个答案: