Отсутствуют линии сетки при использовании nvd3-ng2

Я столкнулся со странной проблемой, которую не могу решить. На моих диаграммах отсутствуют линии осей x и y, а в окне всплывающей подсказки также отображается только текст, а не само поле.

Я проверил это даже с помощью примера дискретной гистограммы из раздела «Основное использование» файла readme на странице ng2-nvd3 на github.

Любые идеи, что вызывает это? У меня очень простой настроенный сайт angular2 с минимальными стилями, кроме начальной загрузки, и очень минимальным HTML. Даже после удаления всех стилей проблема остается.

Все остальное с графикой работает отлично.

Скриншот, показывающий проблемы с образцом гистограммы из файла readme

D196.5 над светло-коричневой полосой — это всплывающая подсказка. Как видите, все линии сетки и всплывающая подсказка отсутствуют.

Вот пример приложения, если кто-то хочет проверить проблему самостоятельно: https://github.com/ekuusi/nvd3-ng2-grid-issue

Пример приложения представляет собой минимальный проект MEAN, в котором проявляется проблема. Чтобы запустить проект:

  • скопировать в локальную папку
  • установка нпм
  • npm запустить сборку
  • запуск нпм

Приложение слушает localhost:3000. Приложение имеет только одно представление с Hello World и гистограммой, демонстрирующей проблему.

РЕДАКТИРОВАТЬ: Решено, но я оставлю это здесь, если кто-то столкнется с той же проблемой. Также не стесняйтесь использовать репозиторий, указанный здесь, если вы хотите увидеть, как заставить ng2-nvd3 работать в проекте Angular 2 с Webpack.


person ekuusi    schedule 29.11.2016    source источник


Ответы (1)


Итак, получается, что мне не хватало необходимых стилей из-за обходного пути Webpack, необходимого для работы ng2-nvd3 в финальной версии, которую я реализовал.

Исправил это, скопировав основную таблицу стилей nv.d3.min.css в папки моего проекта из узла-модуля nvd3 и связав ее на моей индексной странице.

person ekuusi    schedule 29.11.2016