如何在Angular 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達到我的toolTipContentFunction函數內部的斷點，但是這種情況並沒有停止。 不確定此工具提示應該做什么。

我正在使用Chrome版本46.0.2490.80 m。

Answer 1

得到它了！ 我應該將交互模式設置為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>