40

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と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自体を編集する必要はまったくありません。複数のウィジェットで使用するために、そのファイルを汎用的に保つ必要があります。

そして、私たちがそれに取り組んでいる間、ツールチップ全体をクリック可能なリンクにする方法はありますか？

4

9 に答える 9

56

このようにオーバーライドするだけで、確実に機能します

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

または

tooltipContent(function(key, y, e, graph) { return 'Some String' })
于 2012-11-23T11:25:43.500 に答える
15

カスタマイズされたツールチップは、"useInteractiveGuideline" では存在できません。

于 2014-03-11T06:22:24.260 に答える
8

Angular NVD3ラッパーを使用する場合、カスタム メッセージを設定する方法は、単純にチャート オプションを使用することです。

$scope.options = {
  chart: {
  ...
  tooltip: {
      contentGenerator: function(d) {
          return d.series[0].key + ' ' + d.series[0].value;
      }
  },
  ...
  }
};
于 2016-06-23T07:41:41.557 に答える
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。

于 2014-05-26T06:16:05.053 に答える
4 
my_chart = nv.models.multiBarChart()
  .tooltip(function(key, x, y, e, graph) {
    return '<h3>' + key + '</h3>' +
           '<p>' +  y + ' on ' + x + '</p>';
  });
于 2013-03-08T03:52:44.183 に答える
1 
var chart = nv.models.multiBarChart();

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

これは私のために働いた...

于 2016-05-23T15:20:51.900 に答える