HTML Диаграмма Google с аргументом значения в Javascript - PullRequest
Новая
       4

HTML Диаграмма Google с аргументом значения в Javascript

1 голос
/ 27 января 2020

Я пытаюсь отобразить диаграмму Google в HTML, используя аргумент Javascript. Мой код следующий:

HTML файл диаграммы. html: 

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="chart.js"></script>
<div id="chart_div"></div>
<script>
    google.charts.load('current', {packages: ['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawBasic);
    drawBasic(1500000);
</script>

JavaScriptFile диаграмма. js: 

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);

function getData(number) {
    var data = google.visualization.arrayToDataTable([
        ['City', '2010 Population',],
        ['New York City, NY', 8175000],
        ['Los Angeles, CA', 3792000],
        ['Chicago, IL', 2695000],
        ['Houston, TX', 2099000],
        ['Philadelphia, PA', number]
      ]);
    return data;
}

function getOptions () {
    var options = {
        title: 'Population of Largest U.S. Cities',
        chartArea: {width: '50%'},
        hAxis: {
          title: 'Total Population',
          minValue: 0
        },
        vAxis: {
          title: 'City'
        }
      };
    return options;
}

function drawBasic(number) {

      var data = getData(number);

      var options = getOptions();

      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

Диаграмма загружен, но планка для Филадельфии отсутствует. Я заметил, что удаление этой части 

<script>
      google.charts.load('current', {packages: ['corechart', 'bar']});
      google.charts.setOnLoadCallback(drawBasic);
      drawBasic(1500000);
 </script>

в диаграмме. html не меняет поведение. Я пришел к выводу, что диаграмма загружается сразу после строки 

<script type="text/javascript" src="chart.js"></script>

без аргументов для number. Как я могу привести свой аргумент number к моей диаграмме?

1 Ответ

1 голос
/ 27 января 2020

вам нужно дождаться загрузки Google-карт,
, прежде чем рисовать диаграмму.

, который является точкой -> setOnLoadCallback

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

здесь, drawBasic вызывается с аргументом,
до того, как Google Google Charts загрузился, и это не удалось.

затем drawBasic вызывается снова из обратного вызова,
, но у него нет аргумента, поэтому вместо Филадельфии нет бара 

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
drawBasic(1500000);

, вместо этого используйте анонимную функцию для передать аргумент ... 

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(function () {
  drawBasic(1500000);
});

примечание: если вы не планируете использовать материал гистограмму -> google.charts.Bar
, вам не нужно 'bar' пакет ...

...