javascript - 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 は、この 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>'; 
    }
  }
}