这是故事:
我有一个主要网页的DOM,如下所示:
<div class="wrapper">
<div id="dashboard_graph">
</div>
上述DOM默认用于显示仪表板页面
我使用div#dashboard_graph
元素来显示面积图。我进行ajax调用以获取图表值,并在成功接收数据时构建图表。这是功能:
function build_dashboardchart(){
$.ajax({
url : "<?php echo site_url();?>/monitoring/get_data",
data : "for=dashboard",
type : "post",
dataType: "json",
cache : false,
success : function (data){
Morris.Area({
element: 'dashboard_graph',
behaveLikeLine : true,
data: data.data,
xkey: 'time',
ykeys: data.ykeys,
labels: data.labels,
resize: true,
fillOpacity: 0.5,
lineColors: ['#ED5D5D','#32D2C9', '#D6D23A' ],
pointSize: 0,
lineWidth: 1,
postUnits:" kWh",
hideHover : 'auto'
});
build_updowntime();
},
error : function (a){
alert(a.responseText+"|"+a.statusText);
}
});
区域图表已成功生成。我这里没有遇到任何问题。
我使用div.wrapper
元素来显示Web内容(不仅仅是仪表板页面)。然后,我使用ajax调用将另一个页面加载到div.wrapper
元素中。这意味着,仪表板页面(包括图表)将被新页面替换。
function opencontent(ini){
var type = $(ini).attr("data-type");
var page = $(ini).attr("data-page");
$.ajax({
url : "<?php echo site_url();?>/main/load_page/",
data : "type="+type+"&page="+page,
type : "post",
dataType: "html",
success : function (data){
$("div.wrapper").empty();
$("div.wrapper").html(data);
},
error : function (a){
alert(a.responseText+"|"+a.statusText);
}
});
}
新页面成功替换了信息中心页面。但是,我的浏览器挂了10 - 20秒。我得到调试,停止或继续脚本的提示。它说浏览器在几行上都有raphael.js的问题。
Error: Script terminated by timeout at:
paths@http://localhost/~okierie/tismidea/public/main/js/morris-chart/raphael.js:1012:1
R.pathBBox@http://localhost/~okierie/tismidea/public/main/js/morris-chart/raphael.js:1298:19
elproto.getBBox@http://localhost/~okierie/tismidea/public/main/js/morris-chart/raphael.js:2623:28
R._extractTransform@http://localhost/~okierie/tismidea/public/main/js/morris-chart/raphael.js:1910:40
elproto.transform@http://localhost/~okierie/tismidea/public/main/js/morris-chart/raphael.js:4451:9
b.Line</c.prototype.drawXAxis/a@http://localhost/~okierie/tismidea/public/main/js/morris-chart/morris.js:6:16621
b.Line</c.prototype.drawXAxis@http://localhost/~okierie/tismidea/public/main/js/morris-chart/morris.js:6:17449
b.Line</c.prototype.draw@http://localhost/~okierie/tismidea/public/main/js/morris-chart/morris.js:6:16300
b.Grid</d.prototype.redraw@http://localhost/~okierie/tismidea/public/main/js/morris-chart/morris.js:6:8260
b.Grid</d.prototype.resizeHandler@http://localhost/~okierie/tismidea/public/main/js/morris-chart/morris.js:6:10982
f/<@http://localhost/~okierie/tismidea/public/main/js/morris-chart/morris.js:6:77
我在加载到div.wrapper
元素的网页中没有包含或执行任何JavaScript。那么,我怎么能把'raphel.js和莫里斯搞得一团糟?有没有一种安全清除图表的方法(不会打扰raphaeljs)?