Google Chart未顯示在Polymer 2.0元素內部

Question

我正在嘗試在聚合物元素中添加Google圖表，但是當我在index.html中添加它時，它並沒有顯示，盡管它工作正常。 我使用的是來自GoogleWebComponent的 google-chart ，但在任何地方都無法使用，因此我轉到了他們的gstaic庫。 我已經搜索了很多次解決方案，所以有一些答案說添加回調可以解決問題，但我無法做到這一點。以下是我的代碼的元素，該元素負責呈現圖表和屏幕截圖。 在屏幕快照中，第一個是位於index.html中的一個，它工作正常，下面一個是聚合物元素內部的一個不工作。

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<dom-module id="routing-chart">
  <template>
    <style>
      :host {
        display: block;

      }

      #org-chart{

          width: "100%";
          height: "100%";
      }


      .chartNode{
        background: red;
        padding: 10px 10px 10px 10px;
      }

      h3 {
        display: inline-block;
        padding-left: 34%;
        color: cadetblue;
      }

      .refresh {
        padding-left: 38%;
      }
      .refresh-background {
        background-color: var(--primary-color);
      }
      @media screen and (max-width: 320px) {
        #org-chart {
          width: 300px;
        }
      }
      #container {
        margin-left: -2%;
        margin-top: 10%;
        margin-bottom: 10%;
        margin-right: 10%;
      }
      @media only screen and (min-width: 321px) and (max-width: 375px) {
        #org-chart {
          width: 370px;
        }
      }

      @media (max-width: 320px) {
        /*#routing_chart{
          width: 300px;
        }*/
      }
      @media (min-width: 321px) and (max-width: 375px) {
        /*#routing_chart{
          width: 320px;
        }*/
      }
      @media (min-width: 376px) and (max-width: 425px) {
        /*#routing_chart{
          width: 380px;
        }*/
      }
      @media (min-width: 426px) and (max-width: 768px) {
        /*#routing_chart{
          width: 500px;
        }*/
      }
      @media (min-width: 769px) and (max-width: 1024px) {
        /*#routing_chart{
          width: 850px;
        }*/
      }
      @media (min-width: 1025px) {
        /*#routing_chart{
          width: 1000px;
        }*/
      }
      google-chart{
        width: "100%";
        height: "100%";
      }
    </style>

    <!-- <paper-material id="root" elevation=3> -->
      <div id="container">
      <!-- <div><h3>Routing Info</h3><span class="refresh"><paper-button class="refresh-background" raised
                                                                    on-click="loadDataForChart">
        <iron-icon icon="icons:refresh" style="color: #FFFFFF;"></iron-icon>
        </paper-button>

      </span></div> -->
<!--
      <div id="org-chart">
        <google-chart
          id="routing_chart"
          style="height: 100%;width: 100%"
          type='org'
          loading="{{isloading}}"
          options='{"title": "Routing Table"}'>
        </google-chart>
      </div> -->
      <div id='org-chart'></div>
      </div>
    <!-- </paper-material> -->

  </template>
  <script>
      google.charts.load('current', {packages:["orgchart"]});
      // var org-chart=document.querySelector('#container');
      // orgchart.addEventListener('dom-change',function (){
      //   console.log('dom-change');
      // });
      class RoutingChart extends Polymer.Element{
          static get is() { return "routing-chart"; }

          static get properties(){
              return{
                  hubId: {
                      type: String,
                      value: '01-00-00-14-00-01-00-00',
//            observer: 'loadDataForChart',
                      notify: true
                  },
                  isloading:{
                      type:Boolean,
                      notify:true
                  },
                  setGraph:{
                      type:Boolean,
                      value:false,
                      notify:true,
                      observer:'loadDataForChart'
                  }
              };
          }
          constructor() {
              super();

          }
//          hubChanged(){
//              this.shadowRoot.querySelector('#routing_chart').data=
//          }
          loadDataForChart() {
              if(this.setGraph==undefined) return;
              var t = Date.now();
              if(this.setGraph){

                  this.drawChart();

              }
          }



          drawChart() {


              var data = new google.visualization.DataTable();
              data.addColumn('string', 'Name');
              data.addColumn('string', 'Manager');
              data.addColumn('string', 'ToolTip');

              // For each orgchart box, provide the name, manager, and tooltip to show.
              data.addRows([
                [{v:'0', f:'0<div style="color:red; font-style:italic">HUB</div>'},
                 '', 'The Hub'],
                [{v:'1', f:'1'},
                 '0', 'Node 1'],
                ['2', '0', 'Node 2'],
                ['3', '1', 'Node 3'],
                ['4', '3', 'Node 4']
              ]);

              // // Create the chart.
              // var divElement=document.createElement('div');
              //
              // document.getElementById('org-chart').appendChild(divElement);
              var chart = new google.visualization.OrgChart(this.shadowRoot.querySelector('#container'));
              // Draw the chart, setting the allowHtml option to true for the tooltips.
              chart.draw(data, {allowHtml:true,chartArea: {
                  width: '100%'
              },width:'100%'});

              var chart2 = new google.visualization.OrgChart(document.getElementById('org-chart'));
              chart2.draw(data, {allowHtml:true});

        }

      }

      customElements.define(RoutingChart.is, RoutingChart);

  </script>
</dom-module>

Answer 1

您的Div容器位於模板內。 所以代替

this.shadowRoot.querySelector('#container')

采用

this.$.container

它應該可以發揮作用。