莫里斯甜甜圈图。非常长和小的标签答案

【问题标题】：Morris donut graphs. Very long and small labels莫里斯甜甜圈图。非常长和小的标签
【发布时间】：2015-07-03 13:06:19
【问题描述】：

我的莫里斯甜甜圈图上有很长的标签。由于它们很长，因此很难阅读。

当我将鼠标悬停在该文本上时，我希望有某种带有标签的弹出窗口。但是没有 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

【问题讨论】：

标签： label morris.js onhover donut-chart

【解决方案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>

我希望这会对某人有所帮助。

【讨论】：

您好 masterdany88。你将如何遍历几个甜甜圈？我一直在尝试在大约有 10 个甜甜圈的页面上实现您的方法，但我无法获得遍历所有甜甜圈的逻辑。你会知道吗？非常感谢！
在您的回答的帮助下设法让它工作，这是链接stackoverflow.com/questions/40810160/…