php - 使用 PHP MySQL 在 HTML 表中定义的 HighCharts 数据

Question

我正在使用HighCharts显示在 HTML 表 上提取数据的图表，并且我的表由 PHP 填充。不知何故，它显示了图表的标题，即公告喜欢图表，但条形图不包含在其中。任何带或不带解释的答案都将受到高度赞赏:)

<table class="table table-striped table-hover ">
          <div class="row">
              <div class="col-lg-12">
                  <div class="page-header">
                      <h1 id="tables">Announcement Table</h1>
                  </div>
                  <div id="tablecon" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                      <table id="datatable" class="table table-striped table-hover ">
                          <thead>
                              <tr>
                                  <th></th>
                                  <th>Title</th>
                                  <th>Likes</th>
                              </tr>
                          </thead>
                          <tbody class="table table-bordered table-hover ">
                              <?php
                            //set up mysql connection
                            mysql_connect("localhost", "brmhelpd_root", "siopao04") or die(mysql_error());
                            //select database
                            mysql_select_db("brmhelpd_brm") or die(mysql_error());
                                    //select all records form tblmember table
                                    $query = 'SELECT type,title,likes FROM newsfeed ORDER BY created_at ASC';
                                    //execute the query using mysql_query
                                    $result = mysql_query($query);
                                    if($result === FALSE) { 
                                        die(mysql_error()); // TODO: better error handling
                                    }
                                   //then using while loop, it will display all the records inside the table
                                    while ($row = mysql_fetch_array($result)) {
                                        echo ' <tr> ';
                                        echo ' <td> ';
                                        echo $row['type'];
                                        echo ' </td> ';
                                        echo ' <td> ';
                                        echo $row['title'];
                                        echo ' </td> ';
                                        echo ' <td> ';
                                        echo $row['likes'];
                                        echo ' </td> ';
                                        echo ' </tr> ';
                                    }
                              ?>
                          </tbody>
                      </table>
              </div>
          </div>
          </table>

      </div>
          </div>

      </div>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="login-folder/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="login-folder/assets/js/custom.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>

    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/dataTables.bootstrap.min.js"></script>

    <script>
         $(document).ready(function() {
             $('#datatable').DataTable( {
                 "lengthMenu": [[5, 10, 25, -1], [5, 10, 25, "All"]]
             });
         } );
    </script>

    <script>
        $(function () {
            $('#tablecon').highcharts({
                data: {
                    table: 'datatable'
                },
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Announcement Likes Chart'
                },
                yAxis: {
                    allowDecimals: true,
                    title: {
                        text: 'Units'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            this.point.y + ' ' + this.point.name.toLowerCase();
                    }
                }
            });
        });
    </script>

Answer 1

我正在放弃这个问题。我会用 ajax 更好地填充我的表，谢谢 Sebastian Bochan建议。