nvd3饼图.js - 如何编辑工具提示？

Question

我正在使用nvd3的piechart.js组件在我的网站上生成饼图。所提供的.js文件包括如下几个变量：

var margin = {top: 30, right: 20, bottom: 20, left: 20}
    , width = null
    , height = null
    , showLegend = true
    , color = nv.utils.defaultColor()
    , tooltips = true
    , tooltip = function(key, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + '</p>'
      }
    , noData = "No Data Available."
    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
;

在我的内联JS中，我已经能够覆盖一些变量，像这样（覆盖showLegend和margin）：

var chart = nv.models.pieChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
    .showLabels(false)
    .showLegend(false)
    .margin({top: 10, right: 0, bottom: 0, left: 0})
    .donut(true);

我已经尝试以相同的方式重写工具提示：

.tooltip(function(key, y, e, graph) { return 'Some String' })

但是当我这样做时，我的饼图根本没有显示。为什么我不能在这里覆盖工具提示？还有其他的方法可以做到吗？我真的不想编辑piechart.js文件；我需要将该文件保持通用，供多个小部件使用。

顺便说一下，有什么办法可以让整个工具提示变成可点击的链接吗？

- kage23

---

我不是nvd3专家，只是刚开始尝试它。我和你遇到了同样的问题，你需要的是：.tooltipContent(function(key, y, e, graph) { return '一些字符串' }) 顺带一提，是否有办法把整个工具提示变成可点击的链接？ 你可以返回任何HTML作为工具提示，但由于它在悬停时出现/消失，所以很难单击它。 - rotoglup

Answer 1

只需按照这种方式进行覆盖，它一定会起作用。

function tooltipContent(key, y, e, graph) {
            return '<h3>' + key + '</h3>' +'<p>' + y + '</p>' ;
        }

或者

tooltipContent(function(key, y, e, graph) { return 'Some String' })

- user1847371

---

+1 个备选方案。我一直在为许多 NVD3 图表使用 .tooltip(..)，现在只需使用 .tooltipContent(..) 就可以了 lineChart.js。 - shabeer90

请问我该如何修改这个方法以适用于NVD3的折线图？因为在那种情况下，tooltipcontent无法正常工作。 - Mitaksh Gupta

tooltipContent已过时，请使用chart.tooltip.contentGenerator替代。 - cheniel

Answer 2

我刚遇到了相同的问题，使用nvd3 1.8.1版本，以下是我找到的解决方法。

如果没有选项useInteractiveGuideline，则可以在chart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE})中声明您的工具提示生成函数：

Nvd3在调用工具提示时会提供一个名为d的参数，它有三个属性：

• value：光标位置的x轴值
• index：与光标位置对应的图表datum中的索引
• series：包含每个图表项的数组：
  • key：该项图例键
  • value：在光标位置该项的y轴值
  • color：该项图例颜色

这里有一个示例：

chart.tooltip.contentGenerator(function (d) {
          var html = "<h2>"+d.value+"</h2> <ul>";

          d.series.forEach(function(elem){
            html += "<li><h3 style='color:"+elem.color+"'>"
                    +elem.key+"</h3> : <b>"+elem.value+"</b></li>";
          })
          html += "</ul>"
          return html;
        })

重要提示

当使用选项useInteractiveGuideline时，chart.tooltip对象不用于生成工具提示，您必须使用chart.interactiveLayer.tooltip代替，例如：

this.chart.interactiveLayer.tooltip.contentGenerator(function (d) { ... })

我希望即使晚了，这个答案对你也有所帮助。

- LostInBrittany

---

非常好的答案，非常有用.. :-) - Miguel Vazq

天啊，尝试弄清楚为什么图表工具提示不起作用真是让人沮丧。 - David Nguyen

Answer 3

使用“useInteractiveGuideline”时无法存在自定义工具提示。

- user2612936

---

自版本1.8.1（https://github.com/novus/nvd3/tree/v1.8.1-alpha）起，现在可以具有交互式指南的自定义内容。 - Pim

Answer 4

如果您使用Angular NVD3包装器，设置自定义消息的方法是通过图表选项，只需：

$scope.options = {
  chart: {
  ...
  tooltip: {
      contentGenerator: function(d) {
          return d.series[0].key + ' ' + d.series[0].value;
      }
  },
  ...
  }
};

- pCyril

---

你真是个救星！ - Saurabh Verma

Answer 5

除了之前的回答，有时您想使用系列数据而不仅仅是 x 和 y 的数据。例如当...

data = {'values': [{'month': 1, 'count': 2}, ...], 'key': 'test' }

对于这些情况，请使用

.tooltip(function(key, x, y, e, graph) {
         var d = e.series.values[e.pointIndex];
         return '<h3>' + e.series.key + '</h3><p>' + d.month.toString() + ...;
 });

e.series 是鼠标悬停的特定系列，e.pointIndex 是该系列值的索引。这里 e.series.key == key，但我用它来强调什么是 e.series。

- Jorge Leitao

---

你能否花点时间看一下我的问题，链接如下： https://stackoverflow.com/questions/64051027/how-to-add-more-attributes-in-tooltip-series-in-angular-nvd3-line-chart你所说的与我想要实现的非常接近，而且你的数据结构正是我所拥有的，但是我的函数(d)只有一个参数-d，我无法通过d参数访问值数组中的自定义属性。 - user2217057

Answer 6

my_chart = nv.models.multiBarChart()
  .tooltip(function(key, x, y, e, graph) {
    return '<h3>' + key + '</h3>' +
           '<p>' +  y + ' on ' + x + '</p>';
  });

- Aleck Landgraf

---

刚刚将这个从-1投票到了0。为什么会被踩？这个很有帮助。 - nickcoxdotme

不是我干的，但我猜是因为答案不正确——问题是关于饼图的，而工具提示对于饼图不起作用，必须使用tooltipContent，并且不应该有x参数。 - CupawnTae

虽然问题可能是针对饼图的，但我很感谢这个补充。我的搜索更加通用。 - Barrett Clark

Answer 7

我想你在工具提示函数中缺少了'x'参数。函数调用的格式为：

function(key, x, y, e, graph)

- jbizzle

---

这是不正确的 - 饼图中没有x参数; 问题在于它应该是.tooltipContent，就像user1847371的答案中所示。 - CupawnTae

Answer 8

var chart = nv.models.multiBarChart();

chart.tooltip.contentGenerator(function (obj) {
                return JSON.stringify("<b>HOHO</b>")
            })

这对我有用...

- Doctor

Answer 9

chart:{
interactive:true,
tooltips: true,
tooltip: {
  contentGenerator: function (d) {
    return '<h3>PUT YOUR DATA HERE E.g. d.data.name</h3>'
  }
}

Thank You and Best Regards Abhay Patidar

- Ab Pati

---

请编辑您的回答，否则可能会被投票降低。目前它只是一个没有上下文的建议。请参见StackOverflow上的如何撰写良好答案。 - jacefarm