谷歌图表 API 问题

Question

我正在使用 PHP 调用 Yahoo Finance 的 API 以获取各种金融标记。我一直在使用 Google 的 Chart 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);
  }

就那样做吧。