如何向 angular-nvd3 多条形图添加自定义工具提示？

Question

我无法让它在多条形图中工作

$scope.countsChart.options = {
  deepWatchData: false,
  chart: {
    type: 'multiBarChart',
    margin: {
      top: 20,
      right: 20,
      bottom: 45,
      left: 45
    },
    clipEdge: true,
    duration: 500,
    stacked: true,
    showControls: false,
    xAxis: {
      showMaxMin: false,
      tickFormat: d => $scope.countsChart.selectedGranularity().tickFormat(d)
    },
    yAxis: {
      axisLabelDistance: -20,
      tickFormat: d => parseInt(d).toLocaleString()
    },
    useInteractiveGuideline: false,
    interactive: true,
    tooltips: true,
    tooltipContent: (key, x, y, e, graph) => '<h1>Test</h1>'
  }
};

默认的工具提示仍然显示，而不是我的自定义工具提示。

有人成功制作了自定义工具提示吗？

Answer 1

你会想要使用 chart.tooltip.contentGenerator 方法（ES6 相当于我在 this plunker 中模拟的）：

$scope.countsChart.options = {
  chart: {
    ...,
    tooltip: {
      contentGenerator: function (key, x, y, e, graph) { 
        return '<h1>Test</h1>';
      }
   // or if you're writing ES6:
   // contentGenerator: (key, x, y, e, graph) => '<h1>Test</h1>'; 
    }
  }
}