2014-10-19 2 views
5

Я использую библиотеку NVD3 для своего проекта, и я написал следующий код.NVD3 TooltipContent Не работает

var chart = nv.models.lineChart() 
      .useInteractiveGuideline(true) 
      .margin({top: 50, right: 50, bottom: 50, left: 50}) 
      .tooltipContent(function (key, y, e, graph) { 
       console.log("helo"); 
       return "hello"; 
      }); 

Ожидаемый результат должен состоять в том, чтобы показать привет на мыши. Но я не понимаю, вместо этого получаю подсказку по умолчанию.

Пожалуйста, дайте мне знать ошибку, которую я делаю.

+0

возможный дубликат [nvd3 PieChart. js - Как отредактировать подсказку?] (http://stackoverflow.com/questions/12416508/nvd3-piechart-js-how-to-edit-the-t ooltip) – shabeer90

+3

У меня теперь есть строка .useInteractiveGuideline (true) неверна. это должно быть .useInteractiveGuideline (false). Поскольку настраиваемая всплывающая подсказка не может существовать с помощью «useInteractiveGuideline», предложенной пользователем2612936 на http://stackoverflow.com/questions/12416508/nvd3-piechart-js-how-to-edit-the-tooltip –

+2

Спасибо shabeer90 за то, что вы направили правильное сообщение , –

ответ

0

Не могли бы вы создать скрипку или планку? Ниже реализация нашего кода проекта, он возвращает HTML-элемент хорошо работает:

.tooltipContent(function (key, x, y, e) { 
          if (e.value >= 0) { 
           return '<h3>' + key + '</h3>' + 
            '<p>' + y + ' at ' + x + '</p>'; 
          } else { 
           return ''; 
          } 
         }); 
11

Это теперь можно иметь пользовательский контент с интерактивными руководящими принципами в версии 1.8.1 (https://github.com/novus/nvd3/tree/v1.8.1-alpha).

chart.interactiveLayer.tooltip.contentGenerator(function(data) { 
    return 'this is my custom content'; 
}); 
+0

Yup .. это работает отлично .. Спасибо –

+0

работает для меня. Спасибо. –

+0

Спасибо. Это работает и для углового-nvd3. 'interactiveLayer: { всплывающая подсказка: { contentGenerator: function (data) { console.log ('tooltip', data); } } } ' –

1

Начиная с nvd3 версии 1.8+ использовать метод chart.tooltip.contentGenerator() вместо .tooltipContent()

Например:

chart.tooltip.contentGenerator(function(data) { 
     return '<p>' + data.point.x + '</p>' 
    } 

Подробнее здесь - https://github.com/novus/nvd3/issues/1359

Смежные вопросы