Как добавить всплывающую подсказки на угловой nvd3 линии диаграмме

Question

Я использую следующие диаграммы: 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.

Answer 1

Есть! Я должен был установить интерактивный режим, чтобы быть правдой.

<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>