我第一次使用AJAX来避免表单提交上的页面刷新。它工作得很好,数据以HTML格式接收并放在所需的div
内,唯一不起作用的是我用来在页面上绘制饼图的JS函数之一。
我已经在Google上搜索了我的问题,但发现了一些只有JS
的响应的解决方案,但在我的情况下,响应中包含的HTML包括<script>
标签似乎无法正常工作?我在下面重新创建了我的问题,看看:
的index.php:
<p>Name :</p>
<input type="text" id="main-id">
<input type="submit" id="grab" value="Grab!">
<div id="my-data"></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"> </script>
<script src="js/global.js"> </script>
<script src="js/pie.js"></script>
global.js:
$('#grab').on('click', function() {
var main-id = $('#main-id').val();
$.post('data.php', { main-id: main-id }, function(data) {
$('#my-data').html(data);
},'html');
});
var data
获取data.php
的所有回声,包括脚本标记。
我的代码中的代码段导致了我的麻烦:
<script>
$(function() {
$("#pieChart").drawPieChart([{
title: "Monday",
value: 12,
color: "#808080>"
}, {
title: "Tuesday",
value: 28,
color: "#000000"
}, {
title: "Wednesday",
value: 32,
color: "#FF0000"
}, {
title: "Thursday",
value: 8,
color: "#800000"
}, {
title: "Friday",
value: 20,
color: "#7133FF"
}]);
});
</script>
<div id="pieChart" class="chart"> </div>
调用时JS函数.drawPieChart
用饼图填充#pieChart div
,但在我的情况下,它作为原始代码放在页面中,#pieChart div
仍为空白。
如何将.drawPieChart
放入页面后调用它?
更新:
饼图CSS:
/* Pie chart */
.chart {
width: 230px;
height: 230px;
margin-top: 20px;
margin-left: 60px;
float:left;
}
.pieTip {
position: absolute;
display:none;
z-index: 9;
float: left;
min-width: 30px;
max-width: 300px;
padding: 5px 18px 6px;
border-radius: 2px;
background: rgba(255,255,255,.97);
color: #444;
font-size: 10px;
text-shadow: 0 1px 0 #fff;
text-transform: uppercase;
text-align: center;
line-height: 1.3;
letter-spacing: .06em;
box-shadow: 0 0 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.5);
-webkit-transform: all .3s;
-moz-transform: all .3s;
-ms-transform: all .3s;
-o-transform: all .3s;
transform: all .3s;
pointer-events: none;
}
.pieTip:after {
position: absolute;
left: 50%;
bottom: -6px;
display:none;
content: "";
height: 0;
margin: 0 0 0 -6px;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-top: 6px solid rgba(255,255,255,.95);
line-height: 0;
}
.chart path { cursor: pointer; }
答案 0 :(得分:0)
你得到那个错误的原因是&#34;带有工具提示和悬停效果的SVG饼图&#34;图书馆不包括在内。
请在主/布局视图中包含JS和CSS文件(来自codepen.io/githiro/pen/xABCi
)。您可以将其保存在记事本中,因为&#34; .js&#34;和&#34; .css&#34;然后将其包含在您的项目中。