Highcharts不是通过AJAX工作的
Highcharts are not working through AJAX
这是我的代码,我面临的问题是:-这是来自页面的值:-
<?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();
}
文件中是否也包含了highcharts.js ?还可以尝试在ready.
上使用$ 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>
相关文章:
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- Rails-JQueryUIAutcomplete和AJAX不工作,可以't连接到数据库
- jQuery Ajax GET请求工作不正常
- jQuery触发器点击未从AJAX成功工作
- Jquery/Ajax.serialize()未完全工作
- 如何检查这个代码点火器php函数是否工作,该函数是否在ajax url中使用
- XMLHttpRequest在$.ajax工作的地方给出了CORS错误
- 不能让一个简单的Ajax工作
- 无法让我的帖子()使用jQuery Ajax工作
- $.ajax工作不正常-返回index.html
- Jquery AJAX工作,但显示的消息有bug
- AJAX工作,如果chrome开发工具打开,但不如果chrome web工具关闭
- CodeIgniter ajax上传图像(ajax工作,而不是CodeIgniter)
- 需要修改这个jquery弹出菜单脚本与ajax工作
- 任何滑动不与a4j:ajax工作
- jQuery ajax工作一次,但此后每次都通过浏览器加载href
- 无法让ajax工作编码器
- 什么表单标签做时,我想与ajax工作
- Highcharts不是通过AJAX工作的
- 让AJAX工作的问题