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

最近使用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();
            }
        };

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

HelloGravity commented 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 :)

adinapoli commented 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