Question

因此，我已经能够通过使用Vaadin Designer拖放Vaadin 12图表来创建虚拟图表。但是，我似乎无法使用宽度和高度的100％？我已经完成了通常的样式设置，例如宽度和高度为100％或固定的REM，但是没有任何效果……这似乎应该是一件很简单的事情？（同样，我会认为默认值是使用宽度和高度的100％，对吧？）

此外，我感觉，虽然我可能会错，因为如果使用html模式，很难找到文档和如何使用图表的示例...在Java模式下，API已记录在案。但是在html（即使用Vaadin Designer创建模板）模式下，我发现自己像在疯狂地搜索，以查看对我可用的设置...到目前为止，我的谷歌搜索使我陷入了“高潮”，但是（我可能错了在这里）似乎“ highcharts”语法与vaadin设计器html / template语法之间不是一对一的关联，因为仅仅添加参数“ heights”似乎在vaadin中不起作用（尽管它在高图）。如果我是对的，仅使用Java来构建图表并跳过在Vaadin desginer / html模板中尝试这样做的做法是否是“好主意/最佳实践”？有想法吗？

更新＃1：我已经在Vaadin选项卡中跟踪了问题的一部分，以便在图表上添加图表...似乎该选项卡导致图表未使用宽度的100％...不确定原因。 ..

更新＃2：另外，我不知道在这种情况下这是否有所不同，但是我注意到Vaadin设计器会创建“ import”语句，并添加单词“ src”，例如：{{ 1}}，但是虽然可以在vaadin Designer插件视图中正确显示，但是当实际在码头上运行您的应用程序时，该图表将不会显示，解决方法是在import语句中删除“ src”一词，即应该读取：<link rel="import" href="bower_components/vaadin-charts/src/vaadin-chart.html">（根据文档）。看来Vaadin设计器不是100％使用API的最新消息吗？

更新＃3：我创建了一个显示问题的测试用例。我发现如果图表位于第一个选项卡上，问题似乎就不存在。但是，如果图表是第二个选项卡中的一个，并且导航到第二个选项卡，则该图表很小...因此，我认为这与“事件触发的顺序”有关，以向图表指示实际的情况视屏的大小是。这是显示问题的工作案例：

<link rel="import" href="bower_components/vaadin-charts/vaadin-chart.html">

因此，只需运行以上代码（在设计器中），然后单击第二个选项卡（即第2页）。至少在这种情况下，问题似乎可以重现。

更新＃4：我设法通过一个按钮，一个图表和另一个按钮创建了一个非常简单的垂直布局，并且（最终）设法使图表“增长”了……但是，我注意到了两个问题：如果手动调整浏览器标签的大小，则图表不会不调整自身大小，而Vaadin按钮会自动调整自身大小；第二，我必须将最垂直的布局的高度设置为“ 100vh”才能使用整个视口。这是“最佳实践”方式吗？如果此模板存在于另一个组件中怎么办？为什么“高度：100％”不自动使用完父容器高度的100％，并且如果父容器是视口根，那么就用完100％？这是代码：

<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 &amp; 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>

此外，我认为，如果图表位于Vaadin选项卡之一内，仍然存在问题。...

在Vaadin 12中调整图表大小（使用Vaadin Designer时）

0 个答案: