Question

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

虽然我们正在努力，但是有什么方法可以将整个工具提示变成可点击的链接吗？

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

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

Answer 3

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

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

Answer 4

要添加到以前的答案，有时您想要使用该系列的数据，而不仅仅是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 5

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

Answer 6

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

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

Answer 7

var chart = nv.models.multiBarChart();

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

这对我有用......

Answer 8

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

感谢你并致以真诚的问候 Abhay Patidar

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

8 个答案: