1

我遇到了一个奇怪的问题,我无法解决。我的图表缺少 x 和 y 轴线,工具提示框也只显示文本,而不是框本身。

即使仅使用 ng2-nvd3 的 github 页面上自述文件的“基本用法”部分中的示例离散条形图,我也对此进行了测试。

任何想法是什么原因造成的?我有一个非常简单的 angular2 站点设置,除了 bootstrap 之外的样式最少,HTML 也很少。即使删除了所有样式,问题仍然存在。

图表中的其他所有内容都可以完美运行。

显示自述文件中示例条形图问题的屏幕截图

浅棕色条顶部的 D196.5 是工具提示。如您所见,所有网格线和工具提示框都丢失了。

如果有人想自己测试问题,这是一个示例应用程序:https ://github.com/ekuusi/nvd3-ng2-grid-issue

示例应用程序是一个显示该问题的最小 MEAN 项目。运行项目:

  • 复制到本地文件夹
  • npm 安装
  • npm 运行构建
  • npm 开始

该应用程序侦听 localhost:3000。该应用程序只有一个带有 Hello World 的视图和展示问题的条形图。

编辑:已解决,但如果有人遇到同样的问题,我会把它留在这里。如果您想了解如何使用 Webpack 让 ng2-nvd3 在 Angular 2 项目中工作,也可以随意使用此处链接的 repo。

4

1 回答 1

0

好的,事实证明,由于在我实现的最终版本中让 ng2-nvd3 工作所需的 Webpack 变通方法,我错过了所需的样式。

通过将主样式表 nv.d3.min.css 从 nvd3 节点模块复制到我的项目文件夹中并将其链接到我的索引页面中来解决此问题。

于 2016-11-29T18:27:10.043 回答