morris js 甜甜圈不会在引导选项卡中呈现 [英] morris js donut doesnt render in bootstrap tab

问题描述

我正在尝试在引导标签页中显示 morrisjs 图表.我在这里使用示例图表:甜甜圈图

当我将 <div id="example-donut"> 放在引导标签之外时，一切正常.一旦我将它放在引导标签中

<div class="tab-content"><div class="tab-pane" id="mycharts"><div id="example-donut"></div>

我收到以下错误:

错误:<text> 属性的值无效 transform="matrix(NaN,NaN,NaN,NaN,0,0)"

如果我将它放在活动选项卡中，则可以正常工作.

还有其他人遇到同样的问题吗?

解决方案

这对我有用:

Morris.Donut.prototype.resizeHandler = function () {this.timeoutId = null;如果 (this.el && this.el.width() > 0 && this.el.height() > 0) {this.raphael.setSize(this.el.width(), this.el.height());返回 this.redraw();}否则返回空；};Morris.Donut.prototype.setData = 函数(数据){变量行；this.data = 数据；this.values = (function () {var _i, _len, _ref, _results;_ref = this.data;_results = [];for (_i = 0, _len = _ref.length; _i < _len; _i++) {行 = _ref[_i];_results.push(parseFloat(row.value));}返回_结果；}).call(this);如果 (this.el && this.el.width() > 0 && this.el.height() > 0) {返回 this.redraw();}否则返回空；};

I'm trying do display a morrisjs chart within a bootstrap tabbed page. I'm using the sample chart here: Donut Chart

When I place the <div id="example-donut"> outside of the bootstrap tabs, everything works. Once I place it inside a bootstrap tab

<div class="tabbable" id="tabs-936589">
  <div class="tab-content">
    <div class="tab-pane" id="mycharts">
      <div id="example-donut"></div>
    </div>
  </div>
</div>

I get the following error:

Error: Invalid value for <text> attribute transform="matrix(NaN,NaN,NaN,NaN,0,0)"

If I place it in the active tab, this works without any issues.

Anyone else hitting this same issue ?

解决方案

This worked for me:

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;
};

这篇关于morris js 甜甜圈不会在引导选项卡中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！