无法在单个网页上加载所有谷歌图表；我错过了什么吗？答案

【问题标题】：Not able to load all google charts on single web page; am I missing something?无法在单个网页上加载所有谷歌图表；我错过了什么吗？
【发布时间】：2016-04-06 15:29:19
【问题描述】：

我正在使用 google charts api 来显示图表，但是最后一个图表没有加载到页面上，是我遗漏了什么吗？ 请给我解决方案。

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

    function drawcharts() {

        var data1 = google.visualization.arrayToDataTable(
                [
                    ['Year', 'Derby', 'Bristol', 'Warrington', 'Indianapolis', 'Dahlewitz', 'Montreal'],
                    ['2012', 143754.00 , 7607.59, 958.51, 6029.12 , 13605.12, 586.00],
                    ['2013', 186065.32, 1674.50, 1823.93, 9574.24, 23935.14, 743.43],
                    ['2014', 251238.53, 0, 0, 10154.41, 19926.63, 363.71],
                    ['2015', 323134.57, 0, 0, 10400.66, 12002.84, 555.86],
                    ['2016', 467058.18, 0, 0, 10529.27, 5844.90, 0] ,
                    ['2017', 391209.43, 0, 0, 11072.43, 3603.65, 0] ,
                    ['2018', 460257.40, 0, 0, 12031.69, 1833.52, 0] ,
                    ['2019', 744114.34, 0, 0, 13012.83, 1517.89, 0] ,
                    ['2020', 1484193.59, 0, 0, 14274.78, 1292.55, 0]
                ]);

        var options1 = {
            title:'Total CPU Hours Per Year By Site',
            hAxis:{title:'Year', titleTextStyle:{color:'black'}},
            vAxis:{title:'1000s CPU Hours', titleTextStyle:{color:'black'}}
        };

        var chartA = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chartA.draw(data1, options1);

        }

    google.setOnLoadCallback(drawcharts);
    google.load("visualization", "1", {packages:["corechart"]});

</script>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

    function drawcharts1() {

        var data2 = google.visualization.arrayToDataTable(
                [
                    ['Year', 'Derby', 'Bristol', 'Warrington', 'RRC', 'RRD', 'Canada'],
                    ['2012', 275.82, 1.145, 0, 2.71, 18.44, 0],
                    ['2013', 398.29, 0.04, 0, 3.01, 29.38, 0],
                    ['2014', 509.84, 0.04, 0 , 3.29, 26.05, 0],
                    ['2015', 723.08, 0, 0, 3.54, 13.09, 0],
                    ['2016', 951.38, 0, 0, 3.90, 7.59, 0] ,
                    ['2017', 609.01, 0, 0, 4.32, 3.92, 0] ,
                    ['2018', 1002.65, 0 , 0, 4.69, 1.70, 0] ,
                    ['2019', 1133.86, 0, 0, 4.93, 1.31, 0] ,
                    ['2020', 2127, 770 , 770, 5.31, 0.79, 0]
                ]);

        var options2 = {
            title:'Total CPU Hours Required For FE Code',
            hAxis:{title:'Year', titleTextStyle:{color:'black'}},
            vAxis:{title:'1000s CPU Hours', titleTextStyle:{color:'black'}}
        };

        var chartB = new google.visualization.AreaChart(document.getElementById('chart_divs'));
        chartB.draw(data2, options2);
    }

    google.setOnLoadCallback(drawcharts1);
    google.load("visualization", "1", {packages:["corechart"]});

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <!-- load Google AJAX API -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">

google.charts.load('current', {'packages':['bar']});
   google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
  var data = google.visualization.arrayToDataTable([
      ['Day', 'Submitted', 'Published', 'Rejected','Created'],
      ['29-MAR-16', 100, 410, 230,40],
      ['30-MAR-16', 170, 346, 302,430],
      ['31-MAR-16', 60, 100, 130,40],
      ['1-APRIL-16', 302, 350, 520,40]
    ]);


    var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017',
      },
      bars: 'horizontal', // Required for Material Bar Charts.
      hAxis: {format: 'decimal'},
      height: 500,
      colors: ['#1b9e77', '#d95f02', '#7570b3', '#db7f0b']
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div1'));

    chart.draw(data, google.charts.Bar.convertOptions(options));

  }
    </script>

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart3);

  function drawChart3() {
    var data3 = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
    ]);

    var options3 = {
      title: 'Company Performance',
      curveType: 'function',
      legend: { position: 'bottom' }
    };

    var chart3 = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart3.draw(data3, options3);
  }
</script>

</head>
<body>

 <div id="chart_div1" style="width: 900px; height: 500px;"></div>
  <p></p>
  <div id="chart_div" style="width: 900px; height: 500px;"></div>
   <p></p>

   <div id="chart_divs" style="width: 900px; height: 500px;"></div>
   <p></p>

   <div id="curve_chart" style="width: 900px; height: 500px"></div>
   <p></p>

   </body>
   </html>

div id="curve_chart" style="width: 900px; height: 500px" 这一行显示为空白，但如果我单独使用相同的脚本，它会显示图表。是什么原因？

【问题讨论】：

标签： javascript html javascript-objects dom-events google-visualization

【解决方案1】：

我建议从传递给 google.setOnLoadCallback 的一个回调中调用所有“drawcharts”函数

这是一个有效的 jsfiddle。 https://jsfiddle.net/oakley808/z5j9u2sw/

google.load("visualization", "1", {
  packages: ["corechart", "bar"]
});
google.setOnLoadCallback(function(){
    drawcharts()
    drawcharts1()
    drawChart()
    drawChart3()
})

function drawcharts() {

  var data1 = google.visualization.arrayToDataTable(
    [
      ['Year', 'Derby', 'Bristol', 'Warrington', 'Indianapolis', 'Dahlewitz', 'Montreal'],
      ['2012', 143754.00, 7607.59, 958.51, 6029.12, 13605.12, 586.00],
      ['2013', 186065.32, 1674.50, 1823.93, 9574.24, 23935.14, 743.43],
      ['2014', 251238.53, 0, 0, 10154.41, 19926.63, 363.71],
      ['2015', 323134.57, 0, 0, 10400.66, 12002.84, 555.86],
      ['2016', 467058.18, 0, 0, 10529.27, 5844.90, 0],
      ['2017', 391209.43, 0, 0, 11072.43, 3603.65, 0],
      ['2018', 460257.40, 0, 0, 12031.69, 1833.52, 0],
      ['2019', 744114.34, 0, 0, 13012.83, 1517.89, 0],
      ['2020', 1484193.59, 0, 0, 14274.78, 1292.55, 0]
    ]);

  var options1 = {
    title: 'Total CPU Hours Per Year By Site',
    hAxis: {
      title: 'Year',
      titleTextStyle: {
        color: 'black'
      }
    },
    vAxis: {
      title: '1000s CPU Hours',
      titleTextStyle: {
        color: 'black'
      }
    }
  };

  var chartA = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chartA.draw(data1, options1);

}




function drawcharts1() {

  var data2 = google.visualization.arrayToDataTable(
    [
      ['Year', 'Derby', 'Bristol', 'Warrington', 'RRC', 'RRD', 'Canada'],
      ['2012', 275.82, 1.145, 0, 2.71, 18.44, 0],
      ['2013', 398.29, 0.04, 0, 3.01, 29.38, 0],
      ['2014', 509.84, 0.04, 0, 3.29, 26.05, 0],
      ['2015', 723.08, 0, 0, 3.54, 13.09, 0],
      ['2016', 951.38, 0, 0, 3.90, 7.59, 0],
      ['2017', 609.01, 0, 0, 4.32, 3.92, 0],
      ['2018', 1002.65, 0, 0, 4.69, 1.70, 0],
      ['2019', 1133.86, 0, 0, 4.93, 1.31, 0],
      ['2020', 2127, 770, 770, 5.31, 0.79, 0]
    ]);

  var options2 = {
    title: 'Total CPU Hours Required For FE Code',
    hAxis: {
      title: 'Year',
      titleTextStyle: {
        color: 'black'
      }
    },
    vAxis: {
      title: '1000s CPU Hours',
      titleTextStyle: {
        color: 'black'
      }
    }
  };

  var chartB = new google.visualization.AreaChart(document.getElementById('chart_divs'));
  chartB.draw(data2, options2);
}



function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Day', 'Submitted', 'Published', 'Rejected', 'Created'],
    ['29-MAR-16', 100, 410, 230, 40],
    ['30-MAR-16', 170, 346, 302, 430],
    ['31-MAR-16', 60, 100, 130, 40],
    ['1-APRIL-16', 302, 350, 520, 40]
  ]);


  var options = {
    chart: {
      title: 'Company Performance',
      subtitle: 'Sales, Expenses, and Profit: 2014-2017',
    },
    bars: 'horizontal', // Required for Material Bar Charts.
    hAxis: {
      format: 'decimal'
    },
    height: 500,
    colors: ['#1b9e77', '#d95f02', '#7570b3', '#db7f0b']
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div1'));

  chart.draw(data, google.charts.Bar.convertOptions(options));

}




function drawChart3() {
  var data3 = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004', 1000, 400],
    ['2005', 1170, 460],
    ['2006', 660, 1120],
    ['2007', 1030, 540]
  ]);

  var options3 = {
    title: 'Company Performance',
    curveType: 'function',
    legend: {
      position: 'bottom'
    }
  };

  var chart3 = new google.visualization.LineChart(document.getElementById('curve_chart'));

  chart3.draw(data3, options3);
}

【讨论】：

乐于助人。那你介意接受我的回答吗？