使用morris时出现js报错VM9763:10 Error: <text> attribute transform: Expected number, "matrix(NaN,NaN,

来源：互联网发布：网易邮箱服务器域名编辑：程序博客网时间：2024/06/10 23:11

最近使用morris，发现老是出现js报错，

版本morris.min.js v0.5.0

VM9763:10 Error: <text> attribute transform: Expected number, "matrix(NaN,NaN,

查到原因为关闭窗口时，morris仍然调用resizeHandler方法进行画图，由于窗口已经关闭，图肯定画不出来，自然就要报错.

解决方法：

找到对应方法修改源代码

Morris.Donut.prototype.resizeHandler = function() {
           if (this.el && this.el.width() > 0 && this.el.height() > 0) {
                this.timeoutId = null;
                this.raphael.setSize(this.el.width(), this.el.height());
                return this.redraw();
            }
        };

我遇到的情况改写这段代码就可以解决，若还有问题可参考以下代码（未尝试）

HelloGravitycommented on Jun 16 2014

Thank you for your solution heyGalen !
I am having the same error :
Error: Invalid value for attribute transform="matrix(NaN,NaN,NaN,NaN,0,0)"
And I am also not familiar with the source code of Morris.
Although your solution did not work for me, I changed it a little, and now everything works for me, thanks.

Morris.Donut.prototype.resizeHandler = function () {    this.timeoutId = null;    if (this.el && this.el.width() > 0 && this.el.height() > 0) {        this.raphael.setSize(this.el.width(), this.el.height());        return this.redraw();    }    else return null;};Morris.Donut.prototype.setData = function (data) {    var row;    this.data = data;    this.values = (function () {        var _i, _len, _ref, _results;        _ref = this.data;        _results = [];        for (_i = 0, _len = _ref.length; _i < _len; _i++) {            row = _ref[_i];            _results.push(parseFloat(row.value));        }        return _results;    }).call(this);    if (this.el && this.el.width() > 0 && this.el.height() > 0) {        return this.redraw();    }    else return null;};

BTW, morris.js is awesome :)

adinapolicommented on Sep 4 2014

Hello there, for me the error was elsewhere, as part of the "setLabels" handler. The fix was to handle the case where "text1" or "text2" were NaN:

Morris.Donut.prototype.setLabels = function(label1, label2) {    var inner, maxHeightBottom, maxHeightTop, maxWidth, text1bbox, text1scale, text2bbox, text2scale;    inner = (Math.min(this.el.width() / 2, this.el.height() / 2) - 10) * 2 / 3;    maxWidth = 1.8 * inner;    maxHeightTop = inner / 2;    maxHeightBottom = inner / 3;    this.text1.attr({        text: label1,        transform: ''    });    text1bbox = this.text1.getBBox();    text1scale = Math.min(maxWidth / text1bbox.width, maxHeightTop / text1bbox.height);    if (isNaN(text1scale) || text1scale == "-Infinity") {        text1scale = "0.0";    }    this.text1.attr({        transform: "S" + text1scale + "," + text1scale + "," + (text1bbox.x + text1bbox.width / 2) + "," + (text1bbox.y + text1bbox.height)    });    this.text2.attr({        text: label2,        transform: ''    });    text2bbox = this.text2.getBBox();    text2scale = Math.min(maxWidth / text2bbox.width, maxHeightBottom / text2bbox.height);    if (isNaN(text2scale) || text2scale == "-Infinity") {        text2scale = "0.0";    }    var t = {        transform: "S" + text2scale + "," + text2scale + "," + (text2bbox.x + text2bbox.width / 2) + "," + text2bbox.y    };    return this.text2.attr(t);};

解决方法引自morris的githab  https://github.com/morrisjs/morris.js/issues/420

0 0