PHP中的Google Chart API问题

I need to display a dynamic google charts using loop... like all charts have different values but on same page... I have the following code:

 <table>
    <?php 
      $i=0;
      while($i<4){
      echo"
        <script >
        google.charts.load('current', {'packages':['gantt']});
        google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', 'Resource');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent Complete');
  data.addColumn('string', 'Dependencies');

  data.addRows([
    ['2014Spring', 'Spring 2014', 'spring',
     new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
    ['2014Summer', 'Summer 2014', 'summer',
     new Date(2014, 1, 12), new Date(2014, 2, 20), null, 100, null],
     ['2015Winter', 'Winter 2015', 'winter',
     new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],

  ]);

  var options = {
    height: 200,
    gantt: {
      trackHeight: 25
    }
  };

          var chart = new       google.visualization.Gantt(document.getElementById('chart_div$i'));

      chart.draw(data, options);
    }
  </script>

  <tr>


     <td>    Hello </td>
      <td id='chart_div$i'></td>

      </tr>

      ";
      $i++;
      }
    ?>

</table>

What i am doing wrong and how to achieve the goal?

You're outputting the complete <script> tag 4 times. You should just output it once, ideally in the footer of your page. Take a look at my example:

<table>
    <tr>
        <td>Hello</td>
        <td id='chart_div0'></td>
        <td id='chart_div1'></td>
        <td id='chart_div2'></td>
        <td id='chart_div3'></td>
    </tr>
</table>

And then in the footer:

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

    function drawChart() {
<?php for ( $counter = 0; $counter < 4; $counter++ ) : ?>
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task ID');
        data.addColumn('string', 'Task Name');
        data.addColumn('string', 'Resource');
        data.addColumn('date', 'Start Date');
        data.addColumn('date', 'End Date');
        data.addColumn('number', 'Duration');
        data.addColumn('number', 'Percent Complete');
        data.addColumn('string', 'Dependencies');

        data.addRows([
            ['2014Spring', 'Spring 2014', 'spring',
            new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
            ['2014Summer', 'Summer 2014', 'summer',
            new Date(2014, 1, 12), new Date(2014, 2, 20), null, 100, null],
            ['2015Winter', 'Winter 2015', 'winter',
            new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
        ]);

        var options = {
            height: 200,
            gantt: {
                trackHeight: 25
            }
        };

        var chart = new google.visualization.Gantt(document.getElementById('chart_div<?php echo $counter;?>'));
        chart.draw(data, options);

<?php endfor; ?>
    }
  </script>