Morris.js甜甜圈標籤不在中心jquery標籤

我有一個新的問題與Morris.js。我正在使用重繪功能重新繪製標籤點擊圖表，以便正確顯示。問題在於，在使用圓環圖進行此操作時，重繪圖時，會錯誤計算中心標籤的位置。一旦在選項卡上，如果您將鼠標懸停在某個部分上，它會再次正常工作。如果你離開標籤，回來就沒問題。這是中心文本首次加載。我假設morris中的redraw（）不覆蓋文本。不知道如何解決這個問題。Morris.js甜甜圈標籤不在中心jquery標籤

這裏是的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>

JS：

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

來源

2014-12-28 n00bstacker

使用'$（」（''click'，function（e）{'，而不是''（'ul.mytabs a'）。on（'shown.bs.tab'，function（e）{'，you沒有'mytabs'和什麼是'shown.bs.tab'。改變他們，你在控制檯有錯誤：'donut2沒有定義' –

ks發現這一點。我已經更新到mytabs2，並嘗試點擊功能，而不是重繪的喜悅。將看看錯誤不久後需要飛出。但不要相信這是我正在努力解決的問題的原因。 – n00bstacker

首先，你應該在你的jQuery代碼中用mytabs2代替mytabs，因爲你沒有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()"); 
     }) 
    }); 
});

這裏的工作示例：DEMO

來源

2014-12-28 14:02:41

謝謝Raeen。演示看起來不錯。只是不得不掐掉。一旦我回來，會接受和提高。 – n00bstacker

謝謝Raeen。奇蹟般有效！ – n00bstacker

沒問題的人;） –

Morris.js甜甜圈標籤不在中心jquery標籤

回答

相關問題