javascript - Highcharts 无法通过 AJAX 运行

Question

这是我的代码，我面临的问题是:-这是来自页面的值:-

    <?php 
    $avail=$_REQUEST['avail'];
    $issued=$_REQUEST['issued'];
    $bind=$_REQUEST['bind']; 
    ?>
    <script type="text/javascript">

    $(function () {
        $('#books_status').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Books Status'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                }
            },
            series: [{
                    type: 'pie',
                    name: 'Status',
                    data: [
                        ['Availabe', <?php echo $avail; ?>],
                        ['Issues', <?php echo $issued; ?>],
                        ['Binding', <?php echo $bind; ?>]
                    ]
                }]
        });
    });
    </script>
    <div id="books_status"></div>

现在的问题是，通过从页面获取值并将这些值传递到上面的脚本中，我们无法生成图表。

请提出建议。

================================================== =============================================

更新的问题:

这是我的第一个 HTML 页面，我在该页面上有一个 Ajax 函数:libraryData('1') - 通过此函数我可以获取此页面上的数据。HTML 页面代码:

    <?php include_once 'library-header.php'; ?>
    <div class="col-md-10" id="container"><!-- container -->
    <div class="row" id="row-c1">
    <div class="col-md-12" id="content">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#panel-1" data-toggle="tab" onclick="libraryData('1')">Books Management</a>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" id="panel-1">
                <div class="row" id="option">
                    <div class="col-md-6 padding0px">
                        <select name="status" id="status" class="form-control" onchange="getLibraryBooks(this.value, '1');">
                            <option value="-1">Select Status </option>
                            <option value="1">Available</option>
                            <option value="2">Issue</option>
                            <option value="3">Binding</option>
                        </select>
                    </div>
                    <div class="col-md-6"></div>
                </div>
                <div class="row" id="library_data1"></div>
            </div>
        </div>
    </div>
    <?php

    include_once 'library-footer.php';

    ?>

这是我收到第一页请求的第二页:

    <div class="col-md-6">

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Book Number</th>
            <th>Book Title</th>
            <th>Author</th>
            <th>Book Location</th>
            <th>Status</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
            <?php
            $status=-1;
            if(isset ($_REQUEST['status']))
                $status=$_REQUEST['status'];

            if($status!=-1) {
                $query1="select library_books.lib_book_id book_id,library_books.lib_book_title as book_title,library_books.lib_book_author as  book_author,
library_books.lib_book_tag_id as book_tag , library_books.lib_book_status as book_status,library_racks.lib_racks_name as rack_name,
library_departments.lib_department_name as department
From  library_books,library_racks,library_departments
Where library_books.lib_rack_id=library_racks.lib_racks_id
AND library_racks.lib_department_id=library_departments.lib_department_id
AND lib_book_status=$status
Order By library_books.lib_book_id";
            }
            elseif($status==-1) {
                $query1="select library_books.lib_book_id book_id,library_books.lib_book_title as book_title,library_books.lib_book_author as  book_author,
library_books.lib_book_tag_id as book_tag , library_books.lib_book_status as book_status,library_racks.lib_racks_name as rack_name,
library_departments.lib_department_name as department
From  library_books,library_racks,library_departments
Where library_books.lib_rack_id=library_racks.lib_racks_id
AND library_racks.lib_department_id=library_departments.lib_department_id
Order By library_books.lib_book_id";
            }

            $result1=mysql_query($query1);
            $counter=mysql_num_rows($result1);
            $p=($counter/20)+1;
            $p=floor($p);
            if(($counter%20)==0)
                $p=$p-1;
            $count=0;
            if(isset ($_REQUEST['pid'])) {
                $id=$_REQUEST['pid'];
                $k=$id;
            }
            else {
                $id=0;
                $k=0;
            }
            $j=$k*20;

            $avail=0;
            $issued=0;
            $bind=0;

            $query=$query1."";

            $result=mysql_query($query);
            $count=mysql_num_rows($result);
            $i=1;
            while ($row=mysql_fetch_array($result)) {
                ?>
        <tr>
            <td>
                        <?php echo $row['book_id']; ?>
            </td>
            <td>
                        <?php echo $row['book_title']; ?>
            </td>
            <td>
                        <?php echo $row['book_author']; ?>
            </td>
            <td>
                        <?php echo $row['rack_name']; ?>
            </td>
            <td>
                        <?php
                        if($row['book_status']==1) {
                            echo "Available";
                            $avail++;
                        }
                        elseif($row['book_status']==2) {
                            echo "Issue";
                            $issued++;
                        }
                        elseif($row['book_status']==3) {
                            echo "Binding";
                            $bind++;
                        }
                        ?>
            </td>
            <td>
                <a href="library-book-issue-info.php?book_id=<?php echo  $row['book_id']; ?>&status=<?php echo $row['book_status'];?>">View Book Info</a>
            </td>
        </tr>
                <?php
                $i++;
            }
            ?>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">
                <b>
                    Total Results: <?php echo $counter; ?>
                </b>
            </td>
            <td colspan="3">
                    <?php
                    for( $i=0;$i<$p;$i++) { ?>
                <a href="javascript:paging('<?php echo $i; ?>','<?php echo $_REQUEST['page_id']; ?>', '<?php echo $_REQUEST['tab']; ?>','1');"><?php echo $i+1 ?></a>
                        <?php  } ?>
            </td>
        </tr>
    </tfoot>
    </table>

    </div>
    <div class="col-md-6">
    <script type="text/javascript">

    $(document).ready(function()
    {
        $('#books_status').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Books Status'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                }
            },
            series: [{
                    type: 'pie',
                    name: 'Status',
                    data: [
                        ['Availabe', <?php echo $avail; ?>],
                        ['Issues', <?php echo $issued; ?>],
                        ['Binding', <?php echo $bind; ?>]
                    ]
                }]
        });
    });

    </script>


    <div id="books_status" style="height: 400px; margin: 0 auto;"></div>

    </div>

================================================== ===============================AJAX功能:

    function libraryData(subtab)
    {
    var page_id=document.getElementById("page_id").value;
    var tab=document.getElementById("tab").value;
    var xmlhttp;

    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("library_data"+subtab).innerHTML=xmlhttp.responseText;
    }
    }

    xmlhttp.open("GET","library-data-table.php?page_id="+page_id+"&tab="+tab+"&    subtab="+subtab,true);
    xmlhttp.send();
    }

Answer 1

您是否也将 highcharts.js 包含在文件中？还尝试在准备好时使用 $ document 。

代码应该是这样的:

     <?php 
        $avail=$_REQUEST['avail'];
        $issued=$_REQUEST['issued'];
        $bind=$_REQUEST['bind']; 
        ?>
     <script src="highcharts/highcharts.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
     $('#books_status').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Books Status'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                        type: 'pie',
                        name: 'Status',
                        data: [
                            ['Availabe', <?php echo $avail; ?>],
                            ['Issues', <?php echo $issued; ?>],
                            ['Binding', <?php echo $bind; ?>]
                        ]
                    }]
            });
    });
    </script>
  <div id="books_status"></div>