我正在使用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本身.我需要保持该檔案的通用性，以便在多个小部件中使用。
在使用它的同時，有什麼方法可以將整个工具提示變成可點击的鏈接？
- 5月前1 #
- 5月前2 #
我在使用nvd3 1.8.1時遇到了同樣的問题，這是我找到的解決方案.
没有選項
useInteractiveGuideline您只需在wyzwyz中宣告您的工具提示生成函式 ：chart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE})的論點 是nvd3在呼叫工具提示時给出的，它具有三个屬性：d：游標位置的x轴值
value：圖表的index中的索引 對應於游標位置datum：一个陣列，其中包含圖表中的每个專案：series：该專案的圖例键
key：该專案在游標位置的y轴值value：该專案的圖例颜色所以這裏有一个例子：
colorchart.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 使用，
useInteractiveGuideline物件不用於生成工具提示，而必须使用chart.tooltip，即：chart.interactiveLayer.tooltip我希望答案對您有用，即使迟到了.
- 5月前3 #
" useInteractiveGuideline"不存在自定義工具提示。
- 5月前4 #
如果碰巧使用Angular NVD3包裝器，則通過圖表選項設置自定義訊息的方法很簡單：
this.chart.interactiveLayer.tooltip.contentGenerator(function (d) { ... }) - 5月前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 == keye.series
只要以這種方式覆盖它就可以正常工作
或