2016-11-29 40 views
1

我遇到了一個奇怪的問題,我無法修復。我的圖表缺少x和y軸線,工具提示框也只顯示文本,而不是框本身。缺少使用nvd3-ng2的網格線

我在ng2-nvd3的github頁面的自述文件的「基本用法」部分中使用了示例離散條形圖即可進行測試。

任何想法是什麼造成這種情況?我有一個非常簡單的angular2網站設置,除引導程序外最小的樣式,以及非常小的HTML。即使刪除了所有樣式,問題仍然存在。

其他與圖表完美的作品。

Screenshot showing problems with sample bar chart from readme

在淺棕色條的頂部的D196.5是工具提示。正如你可以看到所有的網格線和工具提示框丟失。

下面是一個示例應用程序,如果有人想測試自己的問題:https://github.com/ekuusi/nvd3-ng2-grid-issue

的示例應用程序是一個平均最小的項目表現出的問題。要運行項目:

  • 複製到本地文件夾
  • NPM安裝
  • NPM運行建立
  • NPM啓動

該應用程序監聽到localhost:3000。該應用程序只有一個Hello World視圖和顯示問題的條形圖。

編輯:解決了,但如果有人遇到同樣的問題,我會離開這裏。如果您想了解如何讓ng2-nvd3在帶有Webpack的Angular 2項目中工作,也可以隨意使用此處鏈接的repo。

回答

0

好吧,事實證明,我錯過了所需的樣式,因爲要讓ng2-nvd3在我實現的最終版本中工作所需的Webpack解決方法。

通過將主樣式表nv.d3.min.css從nvd3節點模塊複製到我的項目文件夾並將其鏈接到我的索引頁面中來解決此問題。