Создание внешней JS-страницы для построения диаграмм Google с динамическим количеством и типами диаграмм - PullRequest
Новая
       9

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

0 голосов
/ 10 сентября 2018

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

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

<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 голосов
/ 10 сентября 2018

часть вашей проблемы - время,
вызов 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>
...