Morris Chart - Raphael JS崩溃浏览器

时间:2015-11-24 14:37:15

标签: javascript jquery ajax raphael morris.js

这是故事:
我有一个主要网页的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)?

0 个答案:

没有答案