创建外部JS页面以使用动态数量和类型的图表构建Google图表

Question

我正在尝试使用Google Chart API来显示许多图表。图表数量和图表类型一样都是动态的。目前，我仅使用饼图类型，但会添加到其中。

页面已加载，图表的数量/类型（代码中的小部件）如下所示：

<script>
var widgets = {};
// Load Charts and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Draw the pie chart and bar chart when Charts is loaded.
google.charts.setOnLoadCallback(buildWidgets);

$.ajax({
    type: 'get',
    url: '/api/getPageWidgets.jsp',
    data: {method:''
        , id: <%=custPage%>
        // , viewSampleId: <%=custSurveyId%>
            },
    dataType: 'json',
    async: false,
    success: function(result){
        widgets = result.widgets;
    } 
});     
$(function(){
    buildWidgets(widgets);
});
</script>

在外部JS （widget.js）文件中，我有一个遍历所有小部件并调用build{charttype}Chart的函数，该函数用于构建饼图： / p>

function buildPieChart(data){
var chartId = "chart-"+data.id
// google.charts.setOnLoadCallback(drawChart);

var ib = '<div id="'+chartId+'" class=" col-'+data.layout.w+'">';
var rd = getChartData(data.subType,data.dataConfig)
// console.log(rd);
$("#widget-holder").append(ib);


var chart = new google.visualization.PieChart(document.getElementById(chartId));
  chart.draw(rd, {width: 400, height: 240});

}

但是由于出现此错误，我显然无法正确加载google内容：

我正在从每页仅一张图表且所有代码都在最初加载的jsp页面上时使用的代码进行转换。

由于图表的数量和类型未知，因此加载Google可视化文件的正确方法是什么。这样它们才能起作用。

Answer 1

问题的一部分是时间，
在Google图表加载完成之前，ajax调用正在运行。

建议先加载Google图表，
每次页面加载只需加载一次，
然后您可以根据需要绘制任意数量的图表。

一旦Google已加载，请拨打您的Ajax电话。
另外，ajax上的async: false已被弃用，请改用done回调。

完成ajax后，继续执行buildWidgets。

推荐以下设置...

<script>
google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  $.ajax({
    type: 'get',
    url: '/api/getPageWidgets.jsp',
    data: {method:'',
      id: <%=custPage%>,
      //viewSampleId: <%=custSurveyId%>
    },
    dataType: 'json'
  }).done(function (result) {
    buildWidgets(result.widgets);
  });
});
</script>