nvd3 piechart.js - 如何編輯工具提示？

Question

我使用nvd3的piechart.js組件在我的網站上生成一個餅圖。所提供的.js文件包括幾個變種的，如下：

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本身;我需要保持該文件通用以用於多個小部件。

雖然我們在這樣做，有沒有辦法讓整個工具提示變成可點擊的鏈接？

Answer 1

這樣就忽略它的工作肯定

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

或者

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

Answer 2

my_chart = nv.models.multiBarChart() 
    .tooltip(function(key, x, y, e, graph) { 
    return '<h3>' + key + '</h3>' + 
      '<p>' + y + ' on ' + x + '</p>'; 
    }); 

Answer 3

我想你錯過了你的提示功能的 'X' 參數。函數調用的格式爲：

function(key, x, y, e, graph) 

Answer 4

自定義工具提示不能與「useInteractiveGuideline」一起存在。

Answer 5

要添加到以前的答案，有時您想要使用該系列的數據，而不僅僅是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什麼。

Answer 6

我剛剛得到了同樣的問題，與nvd3 1.8.1，這是我找到的解決方案。

沒有選項useInteractiveGuideline你可以簡單地宣佈你的提示生成功能chart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE})：

d由nvd3調用提示時給出的說法，它有三個屬性：

• value：在光標位置的x軸值
• index：圖表的datum中的索引對應於光標位置
• series：陣列含有，圖表中的每個文件：
  • key：在光標位置
  • color該項目的y軸值：該項目
  • value圖例鍵：該項目

所以這裏的傳奇色彩你有一個例子：

chart.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; 
     }) 

重要提示

當選項useInteractiveGuideline被使用，chart.tooltip對象不用於生成提示，您必須改用chart.interactiveLayer.tooltip，即：

this.chart.interactiveLayer.tooltip.contentGenerator(function (d) { ... }) 

我希望答案對你有用，即使遲到。

Answer 7

var chart = nv.models.multiBarChart(); 

chart.tooltip.contentGenerator(function (obj) { 
       return JSON.stringify("<b>HOHO</b>") 
      }) 

這個工作對我來說...

Answer 8

如果你碰巧使用了Angular NVD3包裝，設置自定義消息的方式是通過圖表選項，簡單地說：

$scope.options = { 
    chart: { 
    ... 
    tooltip: { 
     contentGenerator: function(d) { 
      return d.series[0].key + ' ' + d.series[0].value; 
     } 
    }, 
    ... 
    } 
}; 

Answer 9

interactive:true, 
 
tooltips: true, 
 
tooltip: { 
 
    contentGenerator: function (d) { 
 
    return '<h3>PUT YOUR DATA HERE E.g. d.data.name</h3>' 
 
    } 
 
}