Morris.js甜甜圈标签不在中心jquery标签中

Question

我对Morris.js有一个新的问题。目前，我正在使用重绘功能重新绘制选项卡上的图形，这样它才能正确显示。问题是，当使用甜甜圈图时，当图被重新绘制时，中心标签的位置被错误地计算了。一旦上了标签，如果你悬停在一个区段上，它就会再次正常工作。如果你离开账单回来就没事了。这只是中心文本第一次加载。我认为morris中的重绘()并没有涵盖文本。不知道该怎么处理这件事。

这里是jsfiddle http://jsfiddle.net/d1owfmoc/1/

HTML：

<div id="tabs2">
<div id="tabs-1" class="statdiv">
        <h4>Tab 1</h4>

    <div class="statgrid">
        <div class="col-2-6">
            <div id="morris-donut-chart"></div>
        </div>
    </div>
    <div class="statgrid">
        <div class="col-4-6">
            <div class="col-5-6">Item 1</div>
            <div class="col-1-6">&pound;10.00</div>
        </div>
    </div>
</div>
<div id="tabs-2" class="statdiv">
        <h4>Tab 2</h4>

    <div class="statgrid">
        <div class="col-2-6">
            <div id="morris-donut-chart2"></div>
        </div>
    </div>
    <div class="statgrid">
        <div class="col-4-6">
            <div class="col-5-6">Item 2</div>
            <div class="col-1-6">&pound;10.00</div>
        </div>
    </div>
</div>
<div id="tabs-3" class="statdiv">
        <h4>Tab 3</h4>

    <div class="statgrid">
        <div class="col-2-6">
            <div id="morris-donut-chart3"></div>
        </div>
    </div>
    <div class="statgrid">
        <div class="col-4-6">
            <div class="col-5-6">Item 3</div>
            <div class="col-1-6">&pound;10.00</div>
        </div>
    </div>
</div>
<div id="tabs-4" class="statdiv">
        <h4>Tab 4</h4>

    <div class="statgrid">
        <div class="col-2-6">
            <div id="morris-donut-chart4"></div>
        </div>
    </div>
    <div class="statgrid">
        <div class="col-4-6">
            <div class="col-5-6">Item 4</div>
            <div class="col-1-6">&pound;10.00</div>
        </div>
    </div>
</div>
<div id="tabcontain3">
    <ul class="mytabs2">
        <li class="stattab1"><a href="#tabs-1" data-toggle="tab" data-identifier="donut1">Tab 1</a>
        </li>
        <li class="stattab2"><a href="#tabs-2" data-toggle="tab" data-identifier="donut2">Tab 2</a>
        </li>
        <li class="stattab3"><a href="#tabs-3" data-toggle="tab" data-identifier="donut3">Tab 3</a>
        </li>
        <li class="stattab4"><a href="#tabs-4" data-toggle="tab" data-identifier="donut4">Tab 4</a>
        </li>
    </ul>
</div>

​

联署材料：

$(function () {
  $("#tabs2").tabs();
});

$('ul.mytabs a').on('shown.bs.tab', function (e) {
  var types = $(this).attr("data-identifier");
  var typesArray = types.split(",");
  $.each(typesArray, function (key, value) {
      eval(value + ".redraw()");
  })
});

$(function () {

  var donut1_data = [{

      label: "Download Sales",
      value: 12
  }, {
      label: "In-Store Sales",
      value: 30
  }, {
      label: "Mail-Order Sales",
      value: 20
  }];

  var donut1 = {
      element: 'morris-donut-chart',
      data: donut1_data,
      resize: false
  }

  donut1 = Morris.Donut(donut1)



  var donut2_data = [{

      label: "Download Sales",
      value: 10
  }, {
      label: "In-Store Sales",
      value: 30
  }, {
      label: "Mail-Order Sales",
      value: 20
  }];

  var donut2 = {
      element: 'morris-donut-chart2',
      data: donut2_data,
      resize: false
  }

  donut2 = Morris.Donut(donut2)



  var donut3_data = [{

      label: "Download Sales",
      value: 8
  }, {
      label: "In-Store Sales",
      value: 30
  }, {
      label: "Mail-Order Sales",
      value: 20
  }];

  var donut3 = {
      element: 'morris-donut-chart3',
      data: donut3_data,
      resize: false
  }

  donut3 = Morris.Donut(donut3)


  var donut4_data = [{

      label: "Download Sales",
      value: 2
  }, {
      label: "In-Store Sales",
      value: 30
  }, {
      label: "Mail-Order Sales",
      value: 20
  }];

  var donut4 = {
      element: 'morris-donut-chart4',
      data: donut4_data,
      resize: false
  }

  donut4 = Morris.Donut(donut4)



});

CSS：

#morris-donut-chart svg, #morris-donut-chart2 svg, #morris-donut-chart3 svg, #morris-donut-chart4 svg {
width:250px;
height:250px;
}
#morris-donut-chart, #morris-donut-chart2, #morris-donut-chart3, #morris-donut-chart4 {
width:250px;
height:250px;
}

Answer 1

首先，您应该在jquery代码中用mytabs替换mytabs2，因为您没有mytabs类。

在此之后，将shown.bs.tab更改为click，因为您希望在标签为clicked时重新绘制甜甜圈。

最后，将click函数移到$(function ()中，因为变量donut1、donut2等在function()之外是不可访问的。

$(function () {
    $('ul.mytabs2 a').on('click', function (e) {
      var types = $(this).attr("data-identifier");
      var typesArray = types.split(",");
      $.each(typesArray, function (key, value) {
          eval(value + ".redraw()");
      })
    });
});

下面是工作示例：演示