问题描述
我的morris甜甜圈图上有很长的标签.由于它们很长,因此很难阅读.
I have very long labels on my morris donut graphs.Because of their long it's very hard to read.
当我将鼠标悬停在该文本上时,我希望它带有某种带有标签的弹出窗口.但是没有绑定处理程序的css类.
I would like to have some kind of popup with label when I hover on that text. But there are no css classes to bind a handler.
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}
]
});
我尝试过格式化程序,但这不是解决方案.
I've tried formatter, but it is not a solution.
请给我一些帮助.
推荐答案
长时间没有任何答案之后,我决定发布自己的解决方案.我没有完全按照我的要求做,但是提供了可读的解决方案.
After a long time without any answer I decide to post my own solution. I doesn't do exactly what I've asked for, but supply readable solution.
这是在甜甜圈下方而不是甜甜圈内的标签上完成的.
It was done with label below the donut, instead of inside donut circle.
下面您可以看到在应用程序中工作的屏幕截图:
Below You can see a screenshot of working in app:
这是代码:
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>
我希望这会对某人有所帮助.
I hope this will help someone.
这篇关于莫里斯甜甜圈图.标签长而小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!