Question

我正在尝试使用High-chart将我的PHP / MySQL表转换为图表形式。

打算发生的事情如下：

将生成PHP生成的表“最受欢迎的工具”的内容。
单击“查看图表中的数据”按钮（id =“ view_chart”）。
出现一个带有条形图的弹出窗口，其中显示了“最受欢迎的设施”表中的数据。

但是，单击“查看图表中的数据”按钮（id =“ view_chart”）不会执行任何操作。

我正在关注YouTube tutorial，因为我对PHP，jQuery和High-chart非常陌生。

以下代码显示了我正在使用的代码段。所有适当的插件都链接到标题（另一个文件）中，这不是我在测试中确定的问题。

这就是我要处理的内容：

<div class="table-responsive">
 <table class="table table-bordered table-striped" id="for_chart">
   <thead>
     <tr>
       <th>Facility</th>
       <th>Times Booked</th>
     </tr>
   </thead>
   <tbody id="bookings_month_TableBody">

     <?php
     // If there are any values in the table, display them one at a time.
     if ($mysqli->connect_errno) {
       echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
     }

     $sql = "SELECT tbl_facility.facility_name, COUNT(tbl_booking.facility_ID) AS mostpopularfacility
             FROM tbl_booking, tbl_facility
             WHERE tbl_booking.facility_ID=tbl_facility.facility_ID
             GROUP BY tbl_facility.facility_name
             ORDER BY mostpopularfacility DESC
             LIMIT 7";
     $result = $mysqli->query($sql);

     if ($result->num_rows > 0) {
       // output data of each row
       while($row = $result->fetch_assoc()) {
         ?>

         <tr>
           <td><?php echo $row['facility_name']; ?></td>
           <td><?php echo $row['mostpopularfacility']; ?></td>
         </tr>

         <?php
       }
     } else {
       echo "</br></br>";
       echo "No Bookings are currently in the database under tbl_bookings.   </br></br></br>";
     }
     ?>

   </tbody>
 </table>

</div>

<div id="chart_area" id="Students Admission & Passout Details">

</div>
<br/>
<div align="center">
 <button type="button" name="view_chart" id="view_chart" class="btn-info btn-lg">View Data in Chart</button>
</div>






<script>
$(document).ready(function(){

   $('#chart_area').dialog({ //initialize jquery dialog box
       autoOpen:true, //stops it automatically initializing
       width: 1000,
       height: 500
   });

   $('#view_chart').click(function(){ //When the button with ID view-chart is clicked...
     $('#for_chart').data('graph-container', '#chart_area');
     $('#for_chart').data('graph-type', 'column'); //Line, column, pie, etc...
     $('#chart_area').dialog('open'); //Pop up each query dialog box
     $('#for_chart').highchartTable(); //Initialize highchart table plug in. Takes the table data and puts it in the chart.
   });


});
</script>

图表无法加载：带有PHP的jQuery HighchartTable插件可将表格数据转换为图表

0 个答案: