Morris圆环图 - 将标签提取到物品中

时间:2015-11-05 09:15:14

标签: javascript jquery charts morris.js

我目前正在使用morris圆环图遇到问题。通常,我的项目需要在触摸设备和标准设备上都可用。我们已经设置了圆环图,以便点击一个部分将您链接到另一个页面,该页面根据您单击的部分过滤内容。这个工作就像一个魅力 - 但不是在移动设备上。

由于悬停会显示该部分的描述(在我们的例子中是一个优先级加上有多少具有该特定优先级的项目)并且在触摸设备上无法悬停,我们无法显示该部分后面的内容。

因此:是否有可能获得将项目悬停在特定项目上时出现的描述?

谢谢你,亲切的问候

为了澄清我的问题,我创建了一个专业插图:

Click me

我有我的HTML代码:

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

我的Javascript代码初始化圆环图:

$(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 = "/";
        });
    });

和我的“外包”文本的功能:

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();
    });

现在的主要问题是将当前插入div的外包文本以“morris-label”插入到morris部分,如图所示

0 个答案:

没有答案