Создание внешней js-страницы для построения диаграмм google с динамическим количеством и типами диаграмм

Я пытаюсь использовать API диаграмм Google для отображения ряда диаграмм. Количество диаграмм является динамическим, как и тип диаграммы. В настоящее время я использую только круговую диаграмму, но буду добавлять к ней.

Страница загружена, и количество / тип диаграмм (виджетов в коде) выглядит следующим образом:

<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, функция, которая строит круговые диаграммы:

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 правильно, потому что получаю эту ошибку:

enter image description here

Я конвертирую это из кода, который использовался, когда была возможна только одна диаграмма на страницу, а весь код находился на изначально загруженной странице jsp.

Поскольку количество и типы диаграмм неизвестны, как правильно загружать визуализации Google. Так что они будут работать.

1
0
213
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

часть вашей проблемы - время,
вызов ajax выполняется до завершения загрузки диаграмм Google.

рекомендую сначала загрузить диаграммы Google,
его нужно загружать только один раз при загрузке страницы,
тогда вы можете нарисовать столько диаграмм, сколько необходимо.

как только Google загрузится, сделайте свой вызов ajax. Кроме того, async: false на ajax устарел, используйте вместо этого обратный вызов 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>

Я знал, что делаю что-то простое неправильно. Спасибо

Lance 10.09.2018 17:39

Другие вопросы по теме