2015-07-03 54 views
2

我在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

回答

2

后很长一段时间没有我决定发布自己的解决方案的任何答复。我并没有完全按照我的要求去做,而是提供可读的解决方案。

它用甜甜圈下方的标签完成,而不是在甜甜圈圈内。

Here is working solution on JS Bin

下面你可以看到在应用程序工作的截图:

enter image description here

下面是代码:


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> 

我希望这会帮助别人。

+0

嗨masterdany88。你将如何迭代几个甜甜圈?我一直试图在一个有10个甜甜圈的页面上实现你的方法,但是我无法得到遍历它们的逻辑。你知道吗?非常感谢! – megamaiku

+0

管理得到它的工作与你的答案帮助,这里是链接http://stackoverflow.com/questions/40810160/iterating-through-a-set-morris-donuts-in-asp-net-application-using- jQuery的和摩/ 40942562#40942562 – megamaiku