Polymer 使用；google.visualization."；中的对象<；谷歌图表>；聚合物中的网络组件

是否可以在google组件中使用包google.visualization.*中的核心google图表对象（如DataTable或events）

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

从这篇文章中，我了解到这可能是一个脚本加载问题，但我如何控制google图表脚本加载的方式呢

下面是我的定制活动

.谷歌图表风格{
宽度：100%；
身高：90%；
}
.google图表类{
宽度：100%；
身高：90%；
}
聚合物({
是：“仪表盘”，
特性：{
url:String，
类型：字符串，
选项：对象，
数据：数组，
xaxis:数组，
雅克西斯：数组，
字段：数组
},
convertResultsToDatatable:函数（响应）{
控制台日志（响应）；
//数据表对象
var objDataTable=new google.visualization.DataTable（）；
addColumn（this.xaxis[1]，this.xaxis[2]）；
addColumn（this.yaxis[1]，this.yaxis[2]）；
var afterConversionToDatatable=[[]]；
对于（响应的var指数）{
var objVal=响应[指数]；
var-arr=[]；
for（objVal中的var键）{
if（key==this.xaxis[0]）{
if（this.xaxis[1]=“number”）{
arr.push（parseInt（objVal[key]）；
}否则{
arr.push（objVal[键]）；
}
}else if（key==this.yaxis[0]）{
if（this.yaxis[1]=“number”）{
arr.push（parseInt（objVal[key]）；
}否则{
arr.push（objVal[键]）；
}
}
}
AfterConversionDataTable[索引]=arr；
}
console.log（afterConversionToDatatable）；
addRows（afterConversionToDatatable）；
返回objDataTable；
},
HandlerResponse:函数（数据）{
var-rootKey；
var jsonResult=data.detail.response；
for（jsonResult中的var prop）{
rootKey=prop；
}
//这样我们就不需要硬编码根对象（根对象会随着每个roxie查询而改变）
var resultNode=jsonResult[rootKey].Results.result\u 1.Row；
this.data=this.convertResultsToDatatable（resultNode）；
}
});

我让它起作用了。首先要了解的是，一旦库完全加载，您就可以使用google.visualization.包中的任何类。在我的例子中，如果

调用需要5秒以上才能完成，则库将正确加载。如果小于，我将得到错误：“无法读取未定义的”的属性“DataTable”

为了解决这个加载问题，我必须编写一个Observer方法，该方法保证只有在设置了属性之后才能调用。关键是用

响应和谷歌图表的

类型

属性集调用观察者

请注意，我尝试了使用polymer lifecycle方法（ready、attached、attributeChanged）并将

调用设置为

auto

，但没有成功

在我的示例中，我从另一个自定义聚合物组件设置

谷歌图表

属性

<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>

：主持人{
--叠加不透明度
--叠加锌指数
--叠加显示
}
.google图表类{
宽度：100%；
身高：90%；
不透明度：var（--叠加不透明度，1）；
z指数：var（--zindex）；
}
聚合物({
是：“多边形图表”，
特性：{
id:String，
url:String，
类型：字符串，
选项：对象，
字段：数组，
inputparams:String，
ajaxResponse:对象
},
观察员：[
'ajaxCall（id、url、inputparams）'，
'afterAjaxResponse（类型、ajaxResponse、字段、id）'，
ajaxCall:函数（id、url、inputparams）{
var ajx=document.querySelector（'iron-ajax#'+id+“_ajx”）；
ajx.generateRequest（）；
},
HandlerResponse:函数（数据）{
var-rootKey；
var jsonResult=data.detail.response；
for（jsonResult中的var prop）{
rootKey=prop；
}
var resultNode=jsonResult[rootKey].Results.result\u 1.Row；
if（resultNode.length==0）{
这一点：加载=错误；
}
this.ajaxResponse=resultNode；
},
afterAjaxResponse：函数（图表类型、ajaxResponse、字段、id）{
var loader=document.querySelector（'#loader'）；
loader.dataTable（空）
.然后（dt=>{
返回dt；
})
.then（函数（dt）{
fields.forEach（函数（元素）{
dt.addColumn（element.type，element.label）；
});
var dtRows=convertTo2DArray（ajaxsresponse，getFields（fields））；
dt.addRows（dtRows）；
var gc=document.querySelector（'google-chart#'+id）；
gc.data=dt；
})
.catch（函数（错误）{
控制台错误（error）；
});
}
});

调用的聚合元素如下所示：

<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>

威格霍尔迪夫先生{
宽度：100%；
身高：100%；
}
聚合物({
是：“poly widget”，
特性：{
id:String，
标题：字符串，
url:String，
类型：字符串，
选项：对象，