Блог

Можно ли сделать так, чтобы графики Altair соответствовали размеру экрана, а не имели ширину и высоту, определяемые пикселями? Я кое-что читал о autosize "fit" , но я не уверен, где это указать.

Хотя верно, что vega-lite сама определяет размер диаграммы, с диаграммой (отображаемой в виде canvas) можно обращаться как с изображением.

Я использовал пример из w3css, который применялся к моим диаграммам vega-light, соответственно масштабируя диаграммы. В основном затем они пропорционально масштабируются в соответствии с окружающим контейнером.

Пример HTML, созданный vega-light:

 <div id="visInteractiveYear" class="vega-embed">
<canvas width="1366" height="960" class="marks" style="width: 976px; height: 686px;"></canvas>
</div>
  

Вот фрагмент CSS, который в основном перезаписывает ширину / высоту (стиль) холста:

 canvas.marks {
    max-width: 100%!important;
    height: auto!important;
}
  

Вот тест без какого-либо масштабирования и его исходного размера:

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

Если вы используете интерактивные диаграммы, масштабирование может быть проблемой. Я предполагаю, что позиции щелчков неправильно переведены (поскольку canvas масштабируется, но логика vega не знает об этом), поэтому результатом является странное поведение. В моем случае выделение всегда имеет смещение по отношению к курсору мыши.

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

Возможно, лучшим вариантом является переключение на другую спецификацию vega-light, которая отображает диаграмму для определенного размера дисплея, или переключиться на другое представление (например, стандартный список), которое затем можно легко прочитать на небольших дисплеях (адаптивный дизайн).

Для сложных диаграмм хорошим решением также может быть открытие диаграммы на другой вкладке браузера. Пользователь знает о новой вкладке, мобильный браузер должен отображать только одну диаграмму / изображение, поэтому беспокоиться не о чем. Таким образом, легко перемещаться / прокручивать новую вкладку, поскольку она содержит только диаграмму и, возможно, кнопку возврата / закрытия вкладки.

Способа сделать это нет. Размеры диаграмм Altair / Vega-Lite предварительно определяются спецификацией диаграммы и данными и не могут быть масштабированы в соответствии с размером окна браузера.

Если вы используете Altair 4.0 или более поздней версии, вы можете использовать properties() и container :

 import altair as alt
from vega_datasets import data

source = data.cars()

plot = alt.Chart(source).mark_circle(size=60).encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin',
    tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon']
).properties(
    width='container',
    height='container'
)
  

Это сделает его отзывчивым, обратите внимание, что это размер каждого графика, если у вас их несколько, это работает не так, как вы ожидали, но вместо этого каждый график будет иметь размер родительского контейнера.