Morris donut graphs. Very long and small labels

问题:

I have very long labels on my morris donut graphs. Because of their long it's very hard to read.

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 code:

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.

Please give me some help.

Here is example

回答1:

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.

Here is working solution on JS Bin

Below You can see a screenshot of working in app:

Here is the code:

---

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 head:

<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 body:

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

I hope this will help someone.