如何向 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>'; 
    }
  }
}

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

How do I add a custom tooltip to angular-nvd3 multibar chart?

javascript

angularjs

nvd3.js

angular-nvd3