Morris donut chart - extract label into items

问题

I'm currently running into a problem using the morris donut chart. In general, my project is required to be available on both touch devices as well as standard devices. We have set the donut chart up so that clicking on one section links you to another page which filters content based on which section you clicked. This one is working like a charm - but not on mobile devices.

As hovering brings up the description of the section (in our case a priority plus how many items with that specific priority exist) and hovering is not possible on touch devices, we can't display what's behind the section.

Thus: Is there any possibility to get the description that appears when hovering over an item into the specific item?

Thank you and kind regards

To clarify my issue I've created a professional illustration:

I have my HTML code:

<div id="morris-donut-chart"></div> <div id="morris-label"></div>

And my Javascript code to initialize the donut chart:

$(function() {
        // Donut Chart
        Morris.Donut({
            element : 'morris-donut-chart',
            data : [{
                label : "Niedrig",
                value : 5
            }, {
                label : "Normal",
                value : 1
            }, {
                label : "Hoch",
                value : 5
            }, {
                label : "Kritisch",
                value : 11
            }],
            resize : true,
            colors : ['#fff', '#fff', '#fff', '#fff']
        }).on('click', function(i, row){           
            window.location = "/";
        });
    });

and my functions to "outsource" the text:

function outsourceMorrisDonutChartLabel() {
        //$("#morris-donut-chart tspan:first").css("display","none");
        //$("#morris-donut-chart tspan:nth-child(1)").css("font-size","40px");

        var lab = $("#morris-donut-chart tspan:first").html();
        var val = $("#morris-donut-chart tspan:last").html();
        $('#morris-label').text(lab + ": " + val);
    }

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

    $("#morris-donut-chart").mouseover(function() {
        outsourceMorrisDonutChartLabel();
    });

The main problem now is to get the outsourced text which currently is inserted into the div with the id "morris-label" into the morris sections as shown in the image

来源：https://stackoverflow.com/questions/33540525/morris-donut-chart-extract-label-into-items

标签

javascript

jquery

charts

morris.js