谷歌图表API问题

Question

我使用PHP调用雅虎财经的各种金融标记的API。我一直在用谷歌的图表API绘制这些图表。我有4张图表，直到几天前一直在显示。我不知道发生了什么。它一次只显示一个图形。所有4个图的所有数据都被成功加载，但只显示一个图。任何建议将不胜感激!

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<br>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Stock Index(%)');

  data.addRows([
    <?=$stockIndex?>
  ]);
  var options = {
    chart: {
      title: 'Stock Index',
    },
    width: 1100,
    height: 900
  };
  var chart = new google.charts.Line(document.getElementById('stocks'));
  chart.draw(data, options);
  }
  </script>

<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Stock Index(%)');
  data.addColumn('number', '12-Day EMA');  
  data.addColumn('number', '26-Day EMA');   
  data.addRows([
    <?=$stockTwelveTwentySix?>
  ]);
  var options = {
    chart: {
      title: 'Stock Index w/12-day and 26-day EMA',
    },
      width: 1100,
    height: 900
  };
  var chart = new google.charts.Line(document.getElementById('twelvetwentysixday'));
  chart.draw(data, options);
}
</script>
 <script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Stock Index(%)');
  data.addColumn('number', '12-Day EMA');    
  data.addRows([
    <?=$stockTwelve?>
  ]);
  var options = {
    chart: {
      title: 'Stock Index w/12-day EMA',
    },
     width: 1100,
    height: 900
  };
  var chart = new google.charts.Line(document.getElementById('twelvetwentyday'));
  chart.draw(data, options);
}
</script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Stock Index(%)');
  data.addColumn('number', 'Lower BB');
  data.addColumn('number', 'Upper BB');    
  data.addRows([
    <?= $bb ?>
  ]);
  var options = {
    chart: {
      title: 'Stock Index w/Bollinger Band Comparisons',
    },
     width: 1100,
    height: 900
  };
  var chart = new google.charts.Line(document.getElementById('Bollinger'));
  chart.draw(data, options);
}
 </script>

<div id="stocks"></div>
<br>
<div id="twelvetwentyday"></div>
<br>
<div id="twelvetwentysixday"></div>
<br>
<div id="Bollinger"></div>

Answer 1

解决方案很简单，你将只做一个回调。不要为每个图表都写函数。在一个函数中完成。

    google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Stock Index(%)');
  data.addRows([
    <?=$stockIndex?>
  ]);
  var options = {
    chart: {
      title: 'Stock Index',
    },
    width: 1100,
    height: 900
  };
  var chart = new google.charts.Line(document.getElementById('stocks'));
  chart.draw(data, options);

  var data2 = new google.visualization.DataTable();
  data2.addColumn('number', 'Day');
  data2.addColumn('number', 'Stock Index(%)');
  data2.addColumn('number', '12-Day EMA');  
  data2.addColumn('number', '26-Day EMA');   
  data2.addRows([
    <?=$stockTwelveTwentySix?>
  ]);
  var options2 = {
    chart: {
      title: 'Stock Index w/12-day and 26-day EMA',
    },
      width: 1100,
    height: 900
  };
  var chart2 = new google.charts.Line(document.getElementById('twelvetwentysixday'));
  chart2.draw(data2, options2);

  var data3 = new google.visualization.DataTable();
  data3.addColumn('number', 'Day');
  data3.addColumn('number', 'Stock Index(%)');
  data3.addColumn('number', '12-Day EMA');    
  data3.addRows([
    <?=$stockTwelve?>
  ]);
  var options3 = {
    chart: {
      title: 'Stock Index w/12-day EMA',
    },
     width: 1100,
    height: 900
  };
  var chart3 = new google.charts.Line(document.getElementById('twelvetwentyday'));
  chart3.draw(data3, options3);

  var data4 = new google.visualization.DataTable();
  data4.addColumn('number', 'Day');
  data4.addColumn('number', 'Stock Index(%)');
  data4.addColumn('number', 'Lower BB');
  data4.addColumn('number', 'Upper BB');    
  data4.addRows([
    <?= $bb ?>
  ]);
  var options4 = {
    chart: {
      title: 'Stock Index w/Bollinger Band Comparisons',
    },
     width: 1100,
    height: 900
  };
  var chart4 = new google.charts.Line(document.getElementById('Bollinger'));
  chart.draw(data4, options4);
  }