[英]How to add tooltip on Angular nvd3 line chart
我正在使用以下图表: https : //cmaurer.github.io/angularjs-nvd3-directives/line.with.focus.chart.html
我希望能够将鼠标悬停在图表点上,并查看该点的x / y轴值。 我注意到我可以将tooptip添加到图表中。 我尝试了以下操作,但是当我将鼠标悬停在图形上的某个点上时,没有任何显示。
$scope.toolTipContentFunction = function(){
return function(key, x, y, e, graph) {
return 'Super New Tooltip' +
'<h1>' + key + '</h1>' +
'<p>' + y + ' at ' + x + '</p>'
}
};
<div ng-init="dashboardType = 'Bing'">
<nvd3-line-with-focus-chart
data="data"
id="dashboardChart"
height="400"
height2="50"
margin="{left:80,top:50,bottom:30,right:50}"
yAxisTickFormat="yAxisTickFormatFunction()"
xAxisTickFormat="xAxisTickFormatFunction()"
x2AxisTickFormat="xAxisTickFormatFunction()"
tooltips="true"
tooltipcontent="toolTipContentFunction()">
<svg></svg>
</nvd3-line-with-focus-chart>
</div>
那是用来执行我想要的写功能吗? 如果是,我想念什么吗? 我还尝试通过将鼠标悬停在图表toolTipContentFunction
达到我的toolTipContentFunction
函数内部的断点,但是这种情况并没有停止。 不确定此工具提示应该做什么。
我正在使用Chrome版本46.0.2490.80 m。
得到它了! 我应该将交互模式设置为true。
<nvd3-line-with-focus-chart
data="data"
id="dashboardChart"
height="400"
height2="50"
margin="{left:80,top:50,bottom:30,right:50}"
yAxisTickFormat="yAxisTickFormatFunction()"
xAxisTickFormat="xAxisTickFormatFunction()"
x2AxisTickFormat="xAxisTickFormatFunction()"
tooltips="true"
interactive="true"
tooltipcontent="toolTipContentFunction()">
<svg></svg>
</nvd3-line-with-focus-chart>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.