nvd3 piechart.js – 如何编辑工具提示？
我正在使用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中，我可以覆盖其中的一些variables，如下所示（覆盖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本身; 我需要保持这个文件通用的多个小部件中使用。
而当我们在这里，有什么办法可以使整个工具提示变成一个可点击的链接？
只要用这种方式覆盖它肯定会工作
function tooltipContent(key, y, e, graph) { return '<h3>' + key + '</h3>' +'<p>' + y + '</p>' ; }
要么
tooltipContent(function(key, y, e, graph) { return 'Some String' })
我刚刚得到了与nvd3 1.8.1相同的问题，这是我find的解决scheme。
如果没有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; })
重要的提示
当使用chart.tooltip选项时， chart.tooltip对象不用于生成工具提示，而必须使用chart.interactiveLayer.tooltip ，即：
this.chart.interactiveLayer.tooltip.contentGenerator(function (d) { ... })
我希望答案对你有用，即使迟到。
自定义的工具提示不能与“useInteractiveGuideline”一起存在。
如果您碰巧使用了Angular NVD3包装，设置自定义消息的方式是通过图表选项，只需：
$scope.options = { chart: { ... tooltip: { contentGenerator: function(d) { return d.series[0].key + ' ' + d.series[0].value; } }, ... } };
要添加到以前的答案，有时候你想要使用系列的数据，而不仅仅是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是鼠标hover的特定系列， e.pointIndex是系列值的索引。 这里e.series.key == key ，但我曾经同情e.series 。
my_chart = nv.models.multiBarChart() .tooltip(function(key, x, y, e, graph) { return '<h3>' + key + '</h3>' + '<p>' + y + ' on ' + x + '</p>'; });
我想你在工具提示function中缺less'x'参数。 函数调用的格式是：
function(key, x, y, e, graph)
var chart = nv.models.multiBarChart(); chart.tooltip.contentGenerator(function (obj) { return JSON.stringify("<b>HOHO</b>") })
这对我工作…
interactive:true, tooltips: true, tooltip: { contentGenerator: function (d) { return '<h3>PUT YOUR DATA HERE Eg d.data.name</h3>' } }
