如何在 Angular nvd3 折线图上添加工具提示
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
函数中打断点,但它并没有停止。不确定这个工具提示应该做什么。
我正在使用 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>
我正在使用以下图表: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
函数中打断点,但它并没有停止。不确定这个工具提示应该做什么。
我正在使用 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>