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

IT技术 javascript tooltip d3.js pie-chart nvd3.js
2021-02-20 01:22:27

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

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

6个回答

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

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

或者

tooltipContent(function(key, y, e, graph) { return 'Some String' })
+1 表示替代解决方案。我一直在使用.tooltip(..)很多 NVD3 图表,只需要使用.tooltipContent(..)lineChart.js
2021-04-21 01:22:27
你能告诉我,我如何为 NVD3 的折线图修改这个方法,因为在这种情况下工具提示内容不起作用?
2021-04-23 01:22:27
@MitakshGuptatooltipContent已弃用,请chart.tooltip.contentGenerator改用
2021-05-14 01:22:27

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

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

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

  • 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;
        })

重要的提示

使用该选项时useInteractiveGuidelinechart.tooltip对象不用于生成工具提示,您必须改为使用chart.interactiveLayer.tooltip,即:

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

我希望答案对你有用,即使晚了。

试图弄清楚为什么chart.tooltip不起作用的令人沮丧的神圣地狱
2021-04-20 01:22:27
很好的答案,非常有用.. :-)
2021-04-29 01:22:27

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

从版本 1.8.1 ( github.com/novus/nvd3/tree/v1.8.1-alpha ) 开始,现在可以使用带有交互式指南的自定义内容
2021-04-22 01:22:27

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

$scope.options = {
  chart: {
  ...
  tooltip: {
      contentGenerator: function(d) {
          return d.series[0].key + ' ' + d.series[0].value;
      }
  },
  ...
  }
};
你是救世主!
2021-04-20 01:22:27

要添加到以前的答案,有时您想使用系列的数据,而不仅仅是xy例如当

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

你能不能花点时间看看我这里的问题stackoverflow.com/questions/64051027/... 你说的非常接近我想要实现的,你的数据结构正是我所拥有的,但我的函数(d)有只有一个参数 - d,我无法通过 d 参数访问 values 数组中的自定义属性。
2021-05-04 01:22:27