nvd3 piechart.js - 如何编辑提示？(nvd3 piechart.js - How

我使用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和保证金）：

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自己编辑在所有; 我需要保持该文件一般在多个部件使用。

虽然我们在这，是有一些办法可以让整个工具提示到一个可点击的链接？

Answer 1:

只是覆盖在这种方式肯定会工作

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

要么

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

Answer 2:

我刚刚得到了同样的问题，与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;
        })

重要的提示

当选项useInteractiveGuideline被使用， chart.tooltip对象不用于生成提示，您必须改用chart.interactiveLayer.tooltip ，即：

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

我希望答案是对您有用，即使晚了。

Answer 3:

自定义提示不能以“useInteractiveGuideline”的存在。

Answer 4:

如果你碰巧使用角度NVD3包装，设置自定义消息的方式是通过图表选项，简单地说：

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

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 。

Answer 6:

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

Answer 7:

我想你错过了你的提示功能的“X”参数。 函数调用的格式为：

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

Answer 8:

var chart = nv.models.multiBarChart();

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

这个工作对我来说...

Answer 9:

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

感谢你和问候阿沛Patidar

文章来源: nvd3 piechart.js - How to edit the tooltip?