1

我正在使用以下图表：https ://cmaurer.github.io/angularjs-nvd3-directives/line.with.focus.chart.html

我希望能够将鼠标悬停在图表点上并查看该点的 x/y 轴值。我注意到我可以将 toptip 添加到图表中。我尝试了以下操作，但当我将鼠标悬停在图表上的一个点上时，没有任何显示。

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

4

1 回答 1

0

知道了！我应该将交互模式设置为 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>
于 2015-11-17T18:16:16.947 回答