Javascript nvd3 piechart.js - 如何编辑工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12416508/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
nvd3 piechart.js - How to edit the tooltip?
提问by kage23
I'm using nvd3's piechart.js component to generate a piechart on my site. The provided .js file includes several var's, as follows:
我正在使用 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')
;
In my in-line js, I've been able to override some of those variables, like this (overriding showLegend and margin):
在我的内嵌 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);
I've tried overwriting the tooltip in the same way:
我试过以同样的方式覆盖工具提示：
.tooltip(function(key, y, e, graph) { return 'Some String' })
but when I do that, my piechart does not display at all. Why can't I overwrite the tooltip here? Is there another way I can do so? I'd really rather not have to edit piechart.js itself at all; I need to keep that file generic for use in multiple widgets.
但是当我这样做时，我的饼图根本不显示。为什么我不能在这里覆盖工具提示？我还有其他方法可以这样做吗？我真的宁愿根本不必编辑 piechart.js 本身；我需要保持该文件通用以用于多个小部件。
And while we're at it, is there some way I can make the entire tooltip into a clickable link?
当我们在做的时候，有什么方法可以让整个工具提示变成一个可点击的链接？
回答by user1847371
Just override in this way it will work definitely
只需以这种方式覆盖它肯定会起作用
function tooltipContent(key, y, e, graph) {
return '<h3>' + key + '</h3>' +'<p>' + y + '</p>' ;
}
Or
或者
tooltipContent(function(key, y, e, graph) { return 'Some String' })
回答by LostInBrittany
I have just got the same problem, with nvd3 1.8.1, and this is the solution I've found.
我刚刚遇到了同样的问题，使用 nvd3 1.8.1，这是我找到的解决方案。
Without the option useInteractiveGuidelineyou could simply declare your tooltip generating function in chart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE}):
如果没有该选项，useInteractiveGuideline您可以简单地在以下位置声明您的工具提示生成函数chart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE})：
The argument dis given by nvd3 when calling the tooltip, and it has three properties :
参数d在调用工具提示时由 nvd3 给出，它具有三个属性：
value: the x-axis value for the cursor positionindex: the index in chart'sdatumcorresponding to the the cursor positionseries: an array containing, for each item in the chart :key: the legend key for that itemvalue: the y-axis value for that item at the cursor positioncolor: the legend color for that item
value: 光标位置的 x 轴值index: 图表中datum对应光标位置的索引series：一个数组，其中包含图表中的每个项目：key: 该项目的图例键value: 该项目在光标位置的 y 轴值color：该项目的图例颜色
So here you have an example:
所以这里有一个例子：
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;
})
Important note
重要的提示
When the option useInteractiveGuidelineis used, the chart.tooltipobject isn't used to generate the tooltip, you must instead use the chart.interactiveLayer.tooltip, i.e.:
使用该选项时useInteractiveGuideline，chart.tooltip对象不用于生成工具提示，您必须改为使用chart.interactiveLayer.tooltip，即：
this.chart.interactiveLayer.tooltip.contentGenerator(function (d) { ... })
I hope the answer is useful for you, even if late.
我希望答案对你有用，即使晚了。
回答by user2612936
Customized tooltip can not exist with "useInteractiveGuideline".
自定义工具提示不能与“useInteractiveGuideline”一起存在。
回答by pCyril
If you happen to use the Angular NVD3wrapper, the way to set the custom message is through chart options, simply:
如果您碰巧使用Angular NVD3包装器，则设置自定义消息的方法是通过图表选项，只需：
$scope.options = {
chart: {
...
tooltip: {
contentGenerator: function(d) {
return d.series[0].key + ' ' + d.series[0].value;
}
},
...
}
};
回答by Jorge Leitao
To add to previous answers, sometimes you want to use the data of the series and not only of xand y. For instance when
要添加到以前的答案中，有时您想使用系列的数据，而不仅仅是x和y。例如当
data = {'values': [{'month': 1, 'count': 2}, ...], 'key': 'test' }
For those situations, use
对于这些情况，请使用
.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.seriesis the particular series the mouse is hovering, e.pointIndexis the index on the values of the series. Here e.series.key == key, but I used to empathise what is e.series.
e.series是鼠标悬停的特定系列，e.pointIndex是系列值的索引。在这里e.series.key == key，我却感同身受e.series。
回答by Aleck Landgraf
my_chart = nv.models.multiBarChart()
.tooltip(function(key, x, y, e, graph) {
return '<h3>' + key + '</h3>' +
'<p>' + y + ' on ' + x + '</p>';
});
回答by jbizzle
I think you're missing the 'x' parameter in your tooltip function. The format of the function call is:
我认为您在工具提示功能中缺少“x”参数。函数调用的格式为：
function(key, x, y, e, graph)
回答by Doctor
var chart = nv.models.multiBarChart();
chart.tooltip.contentGenerator(function (obj) {
return JSON.stringify("<b>HOHO</b>")
})
This worked for me...
这对我有用...
回答by Ab Pati
chart:{
interactive:true,
tooltips: true,
tooltip: {
contentGenerator: function (d) {
return '<h3>PUT YOUR DATA HERE E.g. d.data.name</h3>'
}
}