如何在 nvd3-angularjs 中格式化工具提示内容

Question

我使用的是 nvd3-angularjs 的堆积面积图

这是我的html

<div ng-controller="Eth2GraphController">

    <nvd3-stacked-area-chart
    data="GraphData"
    noData="No Data For You!"
    id="eth2Graphs"
    showXAxis="true"
    showYAxis="true"
    showLegend="true"
    interactive="true"
    tooltips="true"
    objectEquality="true"
    margin="{left:100,right:100}"
    useInteractiveGuideline="true"
    tooltipcontent="toolTipContentFunction()"
    xAxisTickFormat="xAxisTickFormatFunction()"
    yAxisTickFormat="yAxisTickFormatFunction()"
    color="colorFunction()"
    legendColor="colorFunction()"
    >
        <svg></svg>
    </nvd3-stacked-area-chart>
</div>

现在，我有一个应该格式化工具提示内容的函数，但它不起作用。也许它与 useInteractiveGuideline 属性有关。我使用相同的工具提示内容功能来编辑我的其他图表的工具提示，它在这些图表上工作，唯一的区别是这些图表不使用 useInteractiveGuideline。

$scope.toolTipContentFunction = function() {
    return function(key, x, y, e, graph) {

        return        '<h3>' + x + '</h3>' + 
                 '<p>' + key + ' ' + y + '</p>';

    }
};

我希望 x 位于中心，以及数据的其他格式。我该怎么做？我是否使用了正确的属性来格式化工具提示？

Answer 1

1. 将tooltipcontent="toolTipContentFunction()" 更改为： tooltipContent="toolTipContentFunction"

2. useInteractiveGuideline 必须设置为 false，tooltipContent 才能工作。我相信这是因为useInteractiveGuideline 使用它自己的弹出窗口。