我目前正在使用morris圆环图遇到问题。通常,我的项目需要在触摸设备和标准设备上都可用。我们已经设置了圆环图,以便点击一个部分将您链接到另一个页面,该页面根据您单击的部分过滤内容。这个工作就像一个魅力 - 但不是在移动设备上。
由于悬停会显示该部分的描述(在我们的例子中是一个优先级加上有多少具有该特定优先级的项目)并且在触摸设备上无法悬停,我们无法显示该部分后面的内容。
因此:是否有可能获得将项目悬停在特定项目上时出现的描述?
谢谢你,亲切的问候
为了澄清我的问题,我创建了一个专业插图:
我有我的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部分,如图所示