Как добавить вторичную ось Y в vega-lite с двумя сериями одинакового масштаба? - PullRequest
Новая
       18

Как добавить вторичную ось Y в vega-lite с двумя сериями одинакового масштаба?

0 голосов
/ 28 августа 2018

Я пытаюсь построить что-то вроде этого: пример гистограммы с несколькими независимыми сериями

У меня есть 2 независимые оси Y с ориентацией влево и вправо.

Все серии / слои, использующие "orient":"right", должны использовать один и тот же масштаб, а все серии / слои, использующие "orient":"left", должны использовать один и тот же масштаб.

Я знаю о "resolve" опции , как описано здесь , но прочитав это Как добавить вторичную ось Y к моей диаграмме vega-lite? и кучу других вопросы, которые я не смог найти в моем конкретном случае.

Моя тщетная попытка до сих пор выглядит так: пример в онлайн-редакторе пример скриншота 

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

}

но ни один из них не работает.

1 Ответ

0 голосов
/ 28 августа 2018

Это можно сделать, создав слой внутри слоя: две диаграммы 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"}}
}

enter image description here

...