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>

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

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

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

    }
};

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

Answer 1

将tooltipcontent="toolTipContentFunction()"更改为： tooltipContent="toolTipContentFunction"
useInteractiveGuideline设置为false才能使tooltipContent生效。我相信这是因为useInteractiveGuideline使用了它自己的弹出窗口。

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

1 个答案: