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

标签 javascript tooltip d3.js pie-chart nvd3.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 中,我已经能够覆盖其中的一些变量,就像这样(覆盖 showLegend 和边距):

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' })

关于javascript - nvd3 piechart.js - 如何编辑工具提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12416508/

相关文章:

javascript - 当传递的键是变量时从 json 获取值

html - Bootstrap 工具提示与普通 HTML 标题

javascript - 如何为 D3 svg 中数据的每个元素附加 <text>

javascript - select() 和 selectAll() 有什么区别

javascript - 使用 JavaScript 将 HTML 内容替换为外部 XML 文件中的内容?

javascript - 如何使用 querySelector 或 jQuery 从以下 html 中抓取数据

c# - 用户控制工具提示在透明部分不起作用

apache-flex - ActionScript 中组件不同部分的不同工具提示

javascript - 使用匿名函数实现接口(interface)的 Typescript 类

javascript - 在 JavaScript 中创建图像时获取图像的自然尺寸?