Итак, я смог создать фиктивную диаграмму, просто перетаскивая диаграммы Vaadin 12 с помощью Vaadin Designer.Тем не менее, я не могу заставить его использовать 100% ширины и высоты?Я сделал обычную настройку стиля так, чтобы ширина и высота были 100% или фиксированный REM, но ничего не работает ... Кажется, это должно быть тривиальным очевидным шагом?(Кроме того, я бы подумал, что по умолчанию будет использоваться 100% ширины и высоты, верно?)
Кроме того, я чувствую , хотя я могу ошибаться, так как труднонайти документацию и примеры использования диаграмм при использовании режима html ... в режиме Java API документирован.Но в режиме html (т. Е. При создании шаблонов с помощью Vaadin Designer) я чувствую, что схожу с ума, как сумасшедший, чтобы посмотреть, какие настройки доступны для меня ... До сих пор мое приближение к Google привело меня к «высоким диаграммам», но (и я могу ошибатьсяздесь) кажется, что это не взаимно-однозначная корреляция между синтаксисом «highcharts» и синтаксисом html / template дизайнера vaadin, так как простое добавление параметра «heights», похоже, не работает в vaadin (хотя это работало вHighcharts).Если я прав, это "хорошая идея / лучшая практика" - просто использовать java для построения графиков и пропустить попытки сделать это в шаблонах Vaadin desginer / html?Мысли?
ОБНОВЛЕНИЕ № 1: Я проследил часть проблемы, чтобы поместить диаграмму во вкладку Vaadin ... Кажется, вкладка заставляет диаграмму не использовать 100% ширины ...не знаю почему ....
ОБНОВЛЕНИЕ №2: Кроме того, я не знаю, если это имеет значение в этом случае, но я заметил, что дизайнер Vaadin создает операторы "import", которые добавляютслово "src", как в: <link rel="import" href="bower_components/vaadin-charts/src/vaadin-chart.html">, но, хотя оно будет правильно отображаться в представлении плагина vaadin designer, при фактическом запуске вашего приложения на пристани диаграмма НЕ будет отображаться, и исправление заключается в удалении слова "src"в операторе импорта, то есть он должен читать: <link rel="import" href="bower_components/vaadin-charts/vaadin-chart.html"> (согласно документу).Похоже, что дизайнер Vaadin не на 100% соответствует API?
Обновление № 3: я создал тестовый пример, который показывает проблему.Я обнаружил, что проблема не существует, если график находится на первой вкладке;тем не менее, если на диаграмме расположена вторая вкладка, а вторая переходит на вторую вкладку, диаграмма небольшая ... Так что я думаю, что она имеет какое-то отношение к «порядку, в котором происходят события», чтобы указать диаграмме, что на самом делеРазмер экрана составляет.Вот рабочий пример, который показывает проблему:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/vaadin-charts/vaadin-chart.html">
<link rel="import" href="../bower_components/vaadin-tabs/vaadin-tabs.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<dom-module id="test-charts">
<template>
<style include="shared-styles">
:host {
display: block;
}
</style>
<div>
<vaadin-tabs selected="{{page}}">
<vaadin-tab>
Page 1
</vaadin-tab>
<vaadin-tab>
Page 2
</vaadin-tab>
<vaadin-tab>
Page 3
</vaadin-tab>
<vaadin-tab>
Page 4
</vaadin-tab>
</vaadin-tabs>
<iron-pages selected="[[page]]">
<page>
<h3>Page 1</h3>Hi All
</page>
<page>
<vaadin-chart title="Solar Employment Growth by Sector, 2010-2016" subtitle="Source: thesolarfoundation.com" categories="[2010, 2011, 2012, 2013, 2014, 2015, 206, 2017]">
<vaadin-chart-series title="Installation" unit="Number of Employees" values="[43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]"></vaadin-chart-series>
<vaadin-chart-series title="Manufacturing" unit="Number of Employees" values="[24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]"></vaadin-chart-series>
<vaadin-chart-series title="Sales & Distribution" unit="Number of Employees" values="[11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]"></vaadin-chart-series>
<vaadin-chart-series title="Project Development" unit="Number of Employees" values="[null, null, 7988, 12169, 15112, 22452, 34400, 34227]"></vaadin-chart-series>
<vaadin-chart-series title="Other" unit="Number of Employees" values="[12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]"></vaadin-chart-series>
</vaadin-chart>
</page>
<page>
<h3>Page 3</h3>Good Morning
</page>
<page>
<h3>Page 4</h3>Welcome
</page>
</iron-pages>
</div>
</template>
<script>
class TestCharts extends Polymer.Element {
static get is() {
return 'test-charts';
}
static get properties() {
return {
// Declare your properties here.
};
}
}
customElements.define(TestCharts.is, TestCharts);
</script>
</dom-module>
Итак, просто запустите код выше (в конструкторе) и затем нажмите на 2-ю вкладку (т. Е. Стр. 2).По крайней мере, это один сценарий, в котором проблема кажется воспроизводимой.
Обновление № 4: мне удалось создать очень простую вертикальную компоновку с кнопкой, диаграммой и другой кнопкой, и я (наконец) справилсячтобы заставить диаграмму «расти» ... однако я заметил две проблемы: если одна из них вручную изменяет размеры вкладки браузера, диаграмма изменит размер НЕ , тогда как кнопки Vaadin автоматически изменят размеры сами;и во-вторых, мне пришлось установить высоту самого верхнего вертикального макета на «100vh», чтобы использовать весь видовой экран.Это лучший способ сделать это?Что если этот шаблон будет существовать в другом компоненте?Почему «height: 100%» автоматически просто не использует 100% высоты родительского контейнера, а если родительский контейнер является корнем области просмотра, то просто использует 100%?Вот код:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/vaadin-ordered-layout/vaadin-vertical-layout.html">
<link rel="import" href="../bower_components/vaadin-button/vaadin-button.html">
<link rel="import" href="../bower_components/vaadin-charts/vaadin-chart.html">
<dom-module id="test-vlbutton">
<template>
<style include="shared-stylesXXXX">
:host {
display: block;
}
</style>
<vaadin-vertical-layout size-full theme="spacing" style="width: 100%; height: 100vh;" id="vl">
<vaadin-button id="but1" theme="primary">
Primary1
</vaadin-button>
<vaadin-chart style="width: 100%; flex-grow: 1" id="chart1" title="Solar Employment Growth by Sector, 2010-2016" subtitle="Source: thesolarfoundation.com" categories="[2010, 2011, 2012, 2013, 2014, 2015, 206, 2017]">
<vaadin-chart-series title="Installation" unit="Number of Employees" values="[43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]"></vaadin-chart-series>
<vaadin-chart-series title="Manufacturing" unit="Number of Employees" values="[24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]"></vaadin-chart-series>
<vaadin-chart-series title="Sales & Distribution" unit="Number of Employees" values="[11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]"></vaadin-chart-series>
<vaadin-chart-series title="Project Development" unit="Number of Employees" values="[null, null, 7988, 12169, 15112, 22452, 34400, 34227]"></vaadin-chart-series>
<vaadin-chart-series title="Other" unit="Number of Employees" values="[12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]"></vaadin-chart-series>
</vaadin-chart>
<vaadin-button style="width: 100%" id="but3" theme="primary">
Primary3
</vaadin-button>
</vaadin-vertical-layout>
</template>
<script>
class TestVlbutton extends Polymer.Element {
static get is() {
return 'test-vlbutton';
}
static get properties() {
return {
// Declare your properties here.
};
}
}
customElements.define(TestVlbutton.is, TestVlbutton);
</script>
</dom-module>
Кроме того, я думаю , что все еще есть проблемы, если график находится в одной из вкладок Ваадина ....