web-dev-qa-db-ja.com

nvd3 piechart.js-ツールチップの編集方法

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

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

javascripttooltipd3.jspie-chartnvd3.js
40
kage23

この方法でオーバーライドするだけで、確実に動作します

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

または

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

Nvd3 1.8.1で同じ問題が発生しましたが、これが解決策です。

オプションuseInteractiveGuidelineがなければ、ツールチップ生成関数をchart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE})で単純に宣言できます。

引数dは、ツールチップを呼び出すときにnvd3によって指定され、3つのプロパティがあります。

  • value：カーソル位置のx軸値
  • index：カーソル位置に対応するチャートのdatumのインデックス
  • series：チャート内の各アイテムを含む配列：
    • key：そのアイテムの凡例キー
    • value：カーソル位置でのそのアイテムのy軸値
    • 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;
        })

重要な注意

オプションuseInteractiveGuidelineが使用されている場合、chart.tooltipオブジェクトはツールチップの生成に使用されません。代わりにchart.interactiveLayer.tooltipを使用する必要があります。

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

遅くても答えが役に立つことを願っています。

37
LostInBrittany

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

15
user2612936

Angular NVD ラッパーを使用する場合、カスタムメッセージを設定する方法は、チャートオプションを使用するだけです。

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

以前の回答に追加するために、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。

5
Jorge Leitão
my_chart = nv.models.multiBarChart()
  .tooltip(function(key, x, y, e, graph) {
    return '<h3>' + key + '</h3>' +
           '<p>' +  y + ' on ' + x + '</p>';
  });
4
Aleck Landgraf

ツールチップ関数の「x」パラメーターが欠落していると思います。関数呼び出しの形式は次のとおりです。

function(key, x, y, e, graph)
2
jbizzle
var chart = nv.models.multiBarChart();

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

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

1
Doctor