带有Java中带有值参数的HTML Google图表

Question

我尝试使用Javascript的参数以HTML显示Google图表。我的代码如下：

HTML文件chart.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 chart.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>

chart.html中的行为不会改变。我认为在

之后立即加载了图表

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

number不带参数的行。如何将参数number赋予图表？

Answer 1

您需要等待Google图表加载，在绘制图表之前。