首页>Program>2021-01-11 19:57source

javascript:nvd3 piechartjs-如何编辑工具提示？

我正在使用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和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本身.我需要保持该文件的通用性，以便在多个小部件中使用。

在使用它的同时，有什么方法可以将整个工具提示变成可点击的链接？

javascript

tooltip

d3.js

piechart

nvd3.js

最新回答

2021-1-11

1 #

只要以这种方式覆盖它就可以正常工作

function tooltipContent(key, y, e, graph) {
            return '<h3>' + key + '</h3>' +'<p>' + y + '</p>' ;
        }

或

tooltipContent(function(key, y, e, graph) { return 'Some String' })

2021-1-11
2 #
我在使用nvd3 1.8.1时遇到了同样的问题，这是我找到的解决方案.

没有选项 useInteractiveGuideline 您只需在wyzwyz中声明您的工具提示生成函数：

chart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE})的论点是nvd3在调用工具提示时给出的，它具有三个属性：
d
2021-1-11
3 #
" useInteractiveGuideline"不存在自定义工具提示。
2021-1-11
4 #
如果碰巧使用Angular NVD3包装器，则通过图表选项设置自定义消息的方法很简单：
```
this.chart.interactiveLayer.tooltip.contentGenerator(function (d) { ... })
```
2021-1-11
5 #
要添加到先前的答案，有时您不仅要使用 $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 是系列值的索引.在这里 e.pointIndex ，但是我曾经很同情 e.series.key == key
e.series

Codebug