在“聚合物

Question

”的 web组件中使用“google.visualization。*”对象是否可以使用谷歌聚合物组件中的谷歌视图.包中的核心谷歌图表对象（如DataTable或事件） ？

我有一个web服务返回JSON数据，我想将它转换成DataTable。我得到的错误信息是“无法读取属性'的数据表'的未定义”

从这篇文章Google Visualization - TypeError: Cannot read property 'DataTable' of undefined [Chrome specific]据我所知，这可能是一个脚本加载问题，但我怎样才能控制谷歌图表脚本加载聚合物的方式？

我的自定义事件的聚合物低于

<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"> 
 
<link rel="import" href="../../bower_components/google-chart/google-chart.html"> 
 

 
<dom-module id="dash-chart"> 
 
\t <template> 
 
\t \t <style type="text/css"> 
 
\t  
 
\t  \t .google-chart-style { 
 
\t  \t \t width: 100%; 
 
\t  \t \t height: 90%; 
 
\t  \t } 
 

 
\t  \t .google-chart-class { 
 
    \t \t \t width:100%; 
 
    \t \t \t height:90%; 
 
\t  \t } 
 

 
\t  </style> 
 
\t \t <iron-ajax 
 
\t \t \t auto 
 
\t \t \t url={{url}} 
 
\t \t \t handle-as="json" 
 
\t \t \t on-response="handleResponse"> 
 
\t \t </iron-ajax> 
 
\t \t 
 
\t \t <google-chart 
 
\t \t \t \t class="google-chart-class" 
 
\t \t \t \t id="myChart" 
 
\t \t \t \t type={{type}} 
 
\t \t \t \t options={{options}}> 
 
\t \t </google-chart> 
 

 
\t </template> 
 
\t <script> 
 
\t \t Polymer({ 
 
\t \t \t is: "dash-chart", 
 
\t \t \t properties : { 
 
\t \t \t \t url: String, 
 
\t \t \t \t type: String, 
 
\t \t \t \t options: Object, 
 
\t \t \t \t data: Array, 
 
\t \t \t \t xaxis: Array, 
 
\t \t \t \t yaxis: Array, 
 
\t \t \t \t fields: Array 
 
\t \t \t }, 
 
\t \t \t 
 
\t \t \t convertResultsToDatatable: function(response) { 
 

 
\t \t \t \t console.log(response); 
 
\t \t \t \t //DataTable object 
 
\t \t \t \t var objDataTable = new google.visualization.DataTable(); 
 

 
\t \t \t \t objDataTable.addColumn(this.xaxis[1], this.xaxis[2]); 
 
\t \t \t \t objDataTable.addColumn(this.yaxis[1], this.yaxis[2]); 
 

 
\t \t \t \t var afterConversionToDatatable = [[]]; 
 
\t \t \t \t for(var index in response) { 
 
\t \t \t \t  var objVal = response[index]; 
 
\t \t \t \t  var arr = []; \t \t \t \t  
 
\t \t \t \t  for(var key in objVal) { 
 

 
\t \t \t \t  \t if(key === this.xaxis[0]) { 
 
\t \t \t \t  \t \t if(this.xaxis[1] === 'number') { 
 
\t \t \t \t  \t \t \t arr.push(parseInt(objVal[key])); 
 
\t \t \t \t  \t \t } else { 
 
\t \t \t \t  \t \t \t arr.push(objVal[key]); 
 
\t \t \t \t  \t \t } 
 
\t \t \t \t  \t } else if (key === this.yaxis[0]) { 
 
\t \t \t \t  \t \t if(this.yaxis[1] === 'number') { 
 
\t \t \t \t  \t \t \t arr.push(parseInt(objVal[key])); 
 
\t \t \t \t  \t \t } else { 
 
\t \t \t \t  \t \t \t arr.push(objVal[key]); 
 
\t \t \t \t  \t \t } 
 
\t \t \t \t  \t } 
 

 
\t \t \t \t  } 
 
\t \t \t \t  
 
\t \t \t \t  afterConversionToDatatable[index] = arr; 
 
\t \t \t \t } 
 

 
\t \t \t \t console.log(afterConversionToDatatable); 
 
\t \t \t \t objDataTable.addRows(afterConversionToDatatable); 
 

 
\t \t \t \t return objDataTable; 
 
\t \t \t }, 
 

 
\t \t \t handleResponse: function(data) { 
 
\t \t \t \t var rootKey; 
 
\t \t \t \t var jsonResult = data.detail.response; 
 
\t \t \t \t for(var prop in jsonResult) { 
 
\t \t \t \t \t rootKey = prop; 
 
\t \t \t \t } 
 

 
\t \t \t \t //Done so that we do not need to hard code the root object (which changes based with every roxie query) 
 
\t \t \t \t var resultNode = jsonResult[rootKey].Results.result_1.Row; 
 
\t \t \t \t this.data = this.convertResultsToDatatable(resultNode); 
 
\t 
 
\t \t \t } 
 
\t \t }); 
 
\t </script> 
 
</dom-module>

Answer 1

我得到了这个工作。首先要了解的是，一旦库已经完全加载，您可以使用google.visualization。*包中的任何类。在我的情况下，如果<iron-ajax>调用需要超过5秒的时间才能完成，则库将正确加载。如果它小于我将得到的错误：“无法读取未定义的”“属性”DataTable“。

为了解决这个加载问题，我必须编写一个Observer方法，保证只有在属性设置后才会调用该方法。关键是拨打电话<iron-ajax>响应和谷歌图表type属性集观察员。

请注意，我尝试使用聚合物生命周期方法（ready，attach，attributeChanged）并将<iron-ajax>设置为auto，但它不起作用。

在我的示例中，我设置了另一个自定义聚合物组件的google-chart属性。

<dom-module id="poly-chart"> 
<template> 
    <style type="text/css"> 
     :host { 
      --overlay-opacity 
      --overlay-zindex 
      --overlay-display 
     } 

     .google-chart-class { 
      width:100%; 
      height:90%; 
      opacity: var(--overlay-opacity, 1); 
      z-index: var(--overlay-zindex); 
     } 

    </style> 
     <iron-ajax 
      id={{id}}_ajx 
      url={{url}} 
      handle-as="json" 
      on-response="handleResponse"> 
     </iron-ajax> 

     <google-chart 
      class="google-chart-class" 
      id={{id}} 
      type={{type}} 
      options={{options}} 
      on-google-chart-ready='chartLoaded'> 
     </google-chart> 

</template> 
<script> 
    Polymer({ 
     is: "poly-chart", 
     properties : { 
      id: String, 
      url: String, 
      type: String, 
      options: Object, 
      fields: Array, 
      inputparams: String, 
      ajaxResponse: Object 
     }, 

     observers: [ 
     'ajaxCall(id, url, inputparams)', 
     'afterAjaxResponse(type, ajaxResponse, fields, id)'], 

     ajaxCall: function(id, url, inputparams){ 
      var ajx = document.querySelector('iron-ajax#'+id+"_ajx"); 
      ajx.generateRequest(); 
     }, 

     handleResponse: function(data) { 
      var rootKey; 
      var jsonResult = data.detail.response; 
      for(var prop in jsonResult) { 
       rootKey = prop; 
      } 

      var resultNode = jsonResult[rootKey].Results.result_1.Row; 
      if(resultNode.length === 0) { 
       this.loading = false; 
      } 

      this.ajaxResponse = resultNode; 
     }, 

     afterAjaxResponse: function(chartType,ajaxResponse, fields, id) { 
      var loader = document.querySelector('#loader'); 
      loader.dataTable(null) 
        .then(dt => { 
        return dt; 
        }) 
        .then(function(dt){ 
        fields.forEach(function(element) { 
         dt.addColumn(element.type, element.label); 
        }); 

        var dtRows = convertTo2DArray(ajaxResponse, getFields(fields)); 
        dt.addRows(dtRows); 
        var gc = document.querySelector('google-chart#'+id); 
        gc.data = dt; 

        }) 
        .catch(function(error){ 
        console.error(error); 
        }); 
     } 

    }); 
</script> 

主叫聚合物元件看起来是这样的：

<dom-module id="poly-widget"> 
<template> 
    <style> 
     .widgetHolderDiv { 
      width: 100%; 
      height: 100%; 
     } 

    </style> 
    <div class="widgetHolderDiv"> 
     <poly-header title={{title}}></poly-header> 
     <poly-chart id={{id}} 
        type={{type}} 
        url={{url}} 
        options={{options}} 
        fields={{fields}} 
        inputparams={{inputparams}}> 
     </poly-chart> 
    </div> 
</template> 
<script type="text/javascript"> 
    Polymer({ 
     is: "poly-widget", 
     properties: { 
      id: String, 
      title: String, 
      url: String, 
      type: String, 
      options: Object, 
      fields: Array, 
      inputparams: String 
     } 
    }); 
</script> 

FYI：这里是链接到我曾与谷歌，图发展创造问题github上的团队https://github.com/GoogleWebComponents/google-chart/issues/182有一些见解。希望这可以帮助。