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

Posted 2023-02-22

【中文标题】nvd3 piechart.js - 如何编辑工具提示？

【英文标题】：nvd3 piechart.js - How to edit the tooltip?

【发布时间】：2012-09-07 03:29:59

【问题描述】：

我正在使用 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 和边距）：

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

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

【问题讨论】：

我不是 nvd3 专家，刚开始玩。我遇到了和你一样的问题，你正在寻找的是： .tooltipContent(function(key, y, e, graph) return 'Some String' )我可以通过某种方式将整个工具提示变成一个可点击的链接？ 您可以为工具提示返回任何 html，但是当它在悬停时出现/消失时，您将很难点击它。

【参考方案1】：

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

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

或者

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

【讨论】：

+1 用于替代解决方案。我一直在为很多 NVD3 图表使用.tooltip(..)，而对于 lineChart.js 只需要使用.tooltipContent(..)

你能告诉我，我该如何为 NVD3 的折线图修改这个方法，因为在这种情况下工具提示内容不起作用？

@MitakshGupta tooltipContent 已弃用，请改用chart.tooltip.contentGenerator

【参考方案2】：

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

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

参数d是nvd3在调用tooltip时给出的，它具有三个属性：

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)  ... )

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

【讨论】：

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

天哪，试图弄清楚为什么 chart.tooltip 不起作用

【参考方案3】：

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

【讨论】：

现在可以使用自 1.8.1 版 (github.com/novus/nvd3/tree/v1.8.1-alpha) 起的带有交互式指南的自定义内容。

【参考方案4】：

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

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

【讨论】：

你是救世主！

【参考方案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是什么。

【讨论】：

你能花点时间看看我这里的问题***.com/questions/64051027/…你说的和我想要达到的很接近，你的数据结构正是我所拥有的，但是我的功能(d ) 只有一个参数 - d，我无法通过 d 参数访问值数组中的自定义属性。

【参考方案6】：

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

【讨论】：

刚刚从 -1 投票到 0。为什么它被否决了？这很有帮助。

不是我，但我猜是因为答案不正确 - 问题是关于饼图，工具提示不适用于饼图，它必须是 tooltipContent 并且应该有t 是一个 x 参数

虽然这个问题可能是针对饼图的，但我很感谢它被添加进来。我的搜索更笼统。

【参考方案7】：

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

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

【讨论】：

这是不正确的 - 饼图中没有 x 参数；问题是它应该是 user1847371 的答案中的 .tooltipContent

【参考方案8】：

var chart = nv.models.multiBarChart();

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

这对我有用...

【参考方案9】：

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

感谢你并致以真诚的问候 阿拜·帕蒂达

【讨论】：

请编辑您的答案，否则您可能会被否决。就像现在一样，这只是一个没有上下文的建议。请在此处查看 *** 上的 How to Write a Good Answer。