我使用nv.d3.js创建了一个饼图。我已经为每个字段创建了一个工具提示。
<nvd3-pie-chart
data="exampleData"
id="exampleId"
showLabels="true"
labelType="value"
x="xPieFunction()"
y="yPieFunction()"
donut="true"
donutRatio=".5"
tooltips="true"
tooltipcontent="toolTipContentFunction()"
color="pieColorFunction()"
donutLabelsOutside="false">
<svg height="200" style="margin-left: -100px; margin-top: -29px;"></svg>
</nvd3-pie-chart>
脚本:
$scope.exampleData = [
{
key: "Medium",
y: 5
},
{
key: "High",
y: 1
},
{
key: "Low",
y: 1
}
];
$scope.toolTipContentFunction = function(){
return function(key, x, y, e, graph) {
return '<p>' + key +"-"+ y.value + '</p>'
}
}
$scope.xPieFunction = function(){
return function(d) {
return d.key;
};
}
$scope.yPieFunction = function(){
return function(d) {
return d.y;
};
}
问题是工具提示没有显示在饼图上,它显示鼠标悬停时与饼图的距离很远。如何根据鼠标悬停调整距离。