Nvd3 piechart.js - Как редактировать всплывающую подсказку?

Я использую компонент nvd3 piechart.js для создания piechart на моем сайте. Предоставленный .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; Мне нужно сохранить этот файл общим для использования в нескольких виджетах.

И пока мы на нем, есть ли способ сделать всю подсказку доступной для ссылки ссылкой?

Ответы

Ответ 1

Просто переопределить таким образом, он будет работать определенно

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

или

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

Ответ 2

У меня только та же проблема, с nvd3 1.8.1, и это решение, которое я нашел.

Без опции useInteractiveGuideline вы можете просто объявить свою функцию создания всплывающей подсказки в chart.tooltip.contentGenerator(function (d){ YOUR_FUNCTION_HERE}):

Аргумент d задается nvd3 при вызове всплывающей подсказки и имеет три свойства:

  • 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, i.e.:

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

Я надеюсь, что ответ полезен для вас, даже если поздно.

Ответ 3

Индивидуальная всплывающая подсказка не может существовать с помощью "useInteractiveGuideline".

Ответ 4

Если вы используете обертку Angular NVD3, способ настроить настраиваемое сообщение через параметры диаграммы просто:

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

Ответ 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.

Ответ 6

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

Ответ 7

Я думаю, что вы не указали параметр "x" в своей функции всплывающей подсказки. Формат вызова функции:

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

Ответ 8

var chart = nv.models.multiBarChart();

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

Это сработало для меня...

Ответ 9

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