在「聚合物

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有一些見解。希望這可以幫助。