Управление размером холста с помощью altair / vega-lite / vega-embed - PullRequest
Новая
       20

Управление размером холста с помощью altair / vega-lite / vega-embed

1 голос
/ 02 июля 2019

Я строю графики, используя vega-lite, и отрисовываю их в DOM, используя vega-embed. Мне нравятся инструменты и абстракции, но я все еще выясняю, как некоторые из них работают.

Я работаю над приложением, в котором важно контролировать точный размер холста. К сожалению, когда я указываю (например) 

bars = alt.Chart(df).mark_bar().encode(
  x='bins:O',
  y="weights:Q"
).properties(width=240, height=200)

Я получаю объект диаграммы, который выглядит следующим образом: 

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
  "config": {
    "view": {
      "height": 300,
      "width": 400
    }
  },
  "data": {
    "name": "data-a681d02fb484e64eadd9721b37015d5b"
  },
  "datasets": {
    "data-a681d02fb484e64eadd9721b37015d5b": [
      {
        "bins": 3.7,
        "weights": 5.555555555555555
      },
      {
        "bins": 10.8,
        "weights": 3.439153439153439
      },
      {
        "bins": 17.9,
        "weights": 17.857142857142858
      },
      {
        "bins": 25.0,
        "weights": 24.206349206349206
      },
      {
        "bins": 32.0,
        "weights": 16.137566137566136
      },
      {
        "bins": 39.1,
        "weights": 12.3015873015873
      },
      {
        "bins": 46.2,
        "weights": 9.788359788359788
      },
      {
        "bins": 53.3,
        "weights": 5.423280423280423
      },
      {
        "bins": 60.4,
        "weights": 3.439153439153439
      },
      {
        "bins": 67.5,
        "weights": 1.8518518518518516
      }
    ]
  },
  "encoding": {
    "x": {
      "field": "bins",
      "type": "ordinal"
    },
    "y": {
      "field": "weights",
      "type": "quantitative"
    }
  },
  "height": 200,
  "mark": "bar",
  "width": 240
}

(Обратите внимание на разную высоту и ширину в config.view.)

Я рендеринг в HTML, как это: 

<div id="my_id"></div>
<script>
const vlSpec = my_chart_obj;
vegaEmbed('#my_id', vlSpec, {
    actions: false
}).then(result=>console.log(result)).catch(console.warn);
</script>

Это производит: 

<div id="my-id" class="vega-embed">
  <canvas width="284" height="252" class="marks"></canvas>
  <div class="vega-bindings"></div>
</div>

Примечание: width="284" height="252"

Похоже, ширина и высота дополняются, но я не могу понять, почему и как.

Сам график выглядит прекрасно, за исключением того, что он имеет неправильный размер и в результате портит мой макет.

enter image description here

Помощь!

1 Ответ

2 голосов
/ 02 июля 2019

Ширина и высота в config.view устанавливаются темой Altair по умолчанию и не влияют на созданную вами диаграмму, поскольку они переопределяются свойствами width и height уровня диаграммы.

Если вы захотите удалить этот конфиг с вашего графика, вы можете запустить 

alt.themes.enable('none')

, чтобы очистить тему графика по умолчанию (alt.themes.enable('default') восстановит настройку по умолчанию).

Относительно размера холста: свойства диаграммы width и height по умолчанию определяют размер самой панели диаграммы, не включая дополнительные отступы для меток осей и заголовков. Если вы хотите, чтобы весь холст вписывался в указанные границы, включая заполнение метки, вы можете указать это через свойство autosize ; например: 

alt.Chart(df).mark_bar().encode(
  x='bins:O',
  y="weights:Q"
).properties(
    width=240,
    height=200,
    autosize=alt.AutoSizeParams(
        type='fit',
        contains='padding'
    )
)

enter image description here

Но имейте в виду, что это не будет работать для каждого типа диаграммы; см. Ограничения автоматического размера для получения дополнительной информации.

...