首頁>Program>source

我正在使用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 #

    只要以這種方式覆盖它就可以正常工作

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

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

  • 5月前
    2 #

    我在使用nvd3 1.8.1時遇到了同樣的問题,這是我找到的解決方案.

    没有選項 useInteractiveGuideline 您只需在wy​​zwyz中宣告您的工具提示生成函式 :

    chart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE})的論點 是nvd3在呼叫工具提示時给出的,它具有三个屬性:

    d

      :游標位置的x轴值

      value :圖表的 index中的索引 對應於游標位置

      datum :一个陣列,其中包含圖表中的每个專案: series

        :该專案的圖例键

        key :该專案在游標位置的y轴值

        value :该專案的圖例颜色

        所以這裏有一个例子:

        color
        

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

        当選擇 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 == key

    e.series

相似問題

  • python 3.x:TypeError:POST資料應為位元組或位元組可迭代它不能是
  • c#:例項欄位与區域性變數的初始化