40

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

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 本身；我需要保持该文件通用，以便在多个小部件中使用。

当我们这样做的时候，有什么方法可以让整个工具提示变成一个可点击的链接？

4

9 回答 9

56

只需以这种方式覆盖它肯定会起作用

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

或者

tooltipContent(function(key, y, e, graph) { return 'Some String' })
于 2012-11-23T11:25:43.500 回答
40

我刚刚遇到了同样的问题，使用 nvd3 1.8.1，这是我找到的解决方案。

如果没有该选项useInteractiveGuideline，您可以简单地在以下位置声明您的工具提示生成函数chart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE})：

该参数d由 nvd3 在调用工具提示时给出，它具有三个属性：

  • value: 光标位置的 x 轴值
  • indexdatum: 图表中与光标位置对应的索引
  • 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) { ... })

我希望答案对你有用，即使迟到了。

于 2015-09-10T10:29:27.470 回答
15

自定义工具提示不能与“useInteractiveGuideline”一起存在。

于 2014-03-11T06:22:24.260 回答
8

如果您碰巧使用Angular NVD3包装器，设置自定义消息的方法是通过图表选项，简单地说：

$scope.options = {
  chart: {
  ...
  tooltip: {
      contentGenerator: function(d) {
          return d.series[0].key + ' ' + d.series[0].value;
      }
  },
  ...
  }
};
于 2016-06-23T07:41:41.557 回答
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。

于 2014-05-26T06:16:05.053 回答
4 
my_chart = nv.models.multiBarChart()
  .tooltip(function(key, x, y, e, graph) {
    return '<h3>' + key + '</h3>' +
           '<p>' +  y + ' on ' + x + '</p>';
  });
于 2013-03-08T03:52:44.183 回答
2

我认为您在工具提示功能中缺少“x”参数。函数调用的格式为：

function(key, x, y, e, graph)
于 2013-09-17T19:26:07.833 回答
1 
var chart = nv.models.multiBarChart();

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

这对我有用...

于 2016-05-23T15:20:51.900 回答
-2 

chart:{
interactive:true,
tooltips: true,
tooltip: {
  contentGenerator: function (d) {
    return '<h3>PUT YOUR DATA HERE E.g. d.data.name</h3>'
  }
}
谢谢你和最好的问候 Abhay Patidar

于 2017-01-05T03:56:18.663 回答