nvd3 piechart.js - 如何编辑工具提示? [英] nvd3 piechart.js - How to edit the tooltip?
问题描述
我使用nvd3的piechart.js组件在我的网站上生成一个饼图。提供的.js文件包括几个var,如下:
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:
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):
In my in-line js, I've been able to override some of those variables, like this (overriding showLegend and 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' })
但是当我这样做时,我的饼图不显示。为什么我不能在这里覆盖工具提示?有没有另一种方式,我可以这样做?我真的不想编辑piechart.js本身;我需要保持该文件通用以在多个小部件中使用。
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.
虽然我们在这里,有一些方法,我可以使整个工具提示成一个可点击的链接
And while we're at it, is there some way I can make the entire tooltip into a clickable link?
推荐答案
只要以这种方式重写即可。
Just override in this way it will work definitely
function tooltipContent(key, y, e, graph) {
return '<h3>' + key + '</h3>' +'<p>' + y + '</p>' ;
}
或
tooltipContent(function(key, y, e, graph) { return 'Some String' })
这篇关于nvd3 piechart.js - 如何编辑工具提示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!