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 和边距):

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?

推荐答案

这样覆盖就肯定能用了

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屋！