莫里斯甜甜圈圖。很長很小的標籤

Question

我在morris甜甜圈圖上有很長的標籤。 因爲它們很長，所以很難閱讀。

我想在某些文本上懸停標籤時彈出一個標籤。但是沒有css類來綁定處理程序。

JS代碼：

Morris.Donut({ 
    element: 'donut-example', 
    data: [ 
    {label: "Download SalesD DDDDDDDDDDDDDDDDD", value: 12}, 
    {label: "In-Store Sales AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA", value: 30}, 
    {label: "Mail-Order Sales VVVVVVVVVVVVVVV", value: 20} 
    ] 
}); 

我試圖格式化，但它不是一個解決方案。

請給我一些幫助。

Here is example

Answer 1

後很長一段時間沒有我決定發佈自己的解決方案的任何答覆。我並沒有完全按照我的要求去做，而是提供可讀的解決方案。

它用甜甜圈下方的標籤完成，而不是在甜甜圈圈內。

Here is working solution on JS Bin

下面你可以看到在應用程序工作的截圖：

下面是代碼：

---

JS：

Morris.Donut({ 
    element: 'morrisDonutChart', 
    data: [ 
    {label: "Download SalesD DDDDDDDDDDDDDDDDD", value: 12}, 
    {label: "In-Store Sales AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA", value: 30}, 
    {label: "Mail-Order Sales VVVVVVVVVVVVVVV", value: 20} 
    ] 
}); 


$("#morrisDonutChart").mouseover(function() { 
    prepareMorrisDonutChart(); 
}); 

$(document).ready(function() { 
    prepareMorrisDonutChart(); 
}); 

function prepareMorrisDonutChart() { 
    $("#morrisDonutChart tspan:first").css("display","none"); 
    $("#morrisDonutChart tspan:nth-child(1)").css("font-size","40px"); 

    var isi = $("#morrisDonutChart tspan:first").html(); 
    $('#morrisDonutChartSpan').text(isi); 
} 

HTML頭：

<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.0/mootools-yui-compressed.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script> 

HTML體：

<div id="morrisDonutChart"></div> 
    <div class="alert alert-info" role="alert"> 
    <span id="morrisDonutChartSpan"></span> 
    </div> 

我希望這會幫助別人。