使用 nvd3-ng2 缺少网格线
Missing gridlines using nvd3-ng2
我 运行 遇到了一个我无法解决的奇怪问题。我的图表缺少 x 和 y 轴线,工具提示框也只显示文本,不显示框本身。
即使仅使用 ng2-nvd3 github 页面自述文件 "Basic usage" 部分的示例离散条形图,我也对此进行了测试。
知道是什么原因造成的吗?我有一个非常简单的 angular2 站点设置,除了 bootstrap 之外的样式最少,而且 HTML 非常少。即使删除了所有样式,问题仍然存在。
图表的其他一切都完美无缺。
Screenshot showing problems with sample bar chart from readme
浅棕色条顶部的 D196.5 是工具提示。如您所见,所有网格线和工具提示框都丢失了。
如果有人想自己测试问题,这里有一个示例应用程序:https://github.com/ekuusi/nvd3-ng2-grid-issue
示例应用程序是一个显示问题的最小 MEAN 项目。到 运行 项目:
- 复制到本地文件夹
- npm 安装
- npm 运行 构建
- npm 启动
应用监听 localhost:3000。该应用只有一个视图,其中包含 Hello World 和展示问题的条形图。
编辑:已解决,但如果有人 运行 遇到同样的问题,我会把它留在这里。如果您想了解如何让 ng2-nvd3 在带有 Webpack 的 Angular 2 项目中工作,也可以随意使用此处链接的 repo。
好的,事实证明我缺少所需的样式,因为 Webpack 解决方法需要让 ng2-nvd3 在我实现的最终版本中工作。
通过将主样式表 nv.d3.min.css 从 nvd3 节点模块复制到我的项目文件夹并在我的索引页面中链接它来修复此问题。
我 运行 遇到了一个我无法解决的奇怪问题。我的图表缺少 x 和 y 轴线,工具提示框也只显示文本,不显示框本身。
即使仅使用 ng2-nvd3 github 页面自述文件 "Basic usage" 部分的示例离散条形图,我也对此进行了测试。
知道是什么原因造成的吗?我有一个非常简单的 angular2 站点设置,除了 bootstrap 之外的样式最少,而且 HTML 非常少。即使删除了所有样式,问题仍然存在。
图表的其他一切都完美无缺。
Screenshot showing problems with sample bar chart from readme
浅棕色条顶部的 D196.5 是工具提示。如您所见,所有网格线和工具提示框都丢失了。
如果有人想自己测试问题,这里有一个示例应用程序:https://github.com/ekuusi/nvd3-ng2-grid-issue
示例应用程序是一个显示问题的最小 MEAN 项目。到 运行 项目:
- 复制到本地文件夹
- npm 安装
- npm 运行 构建
- npm 启动
应用监听 localhost:3000。该应用只有一个视图,其中包含 Hello World 和展示问题的条形图。
编辑:已解决,但如果有人 运行 遇到同样的问题,我会把它留在这里。如果您想了解如何让 ng2-nvd3 在带有 Webpack 的 Angular 2 项目中工作,也可以随意使用此处链接的 repo。
好的,事实证明我缺少所需的样式,因为 Webpack 解决方法需要让 ng2-nvd3 在我实现的最终版本中工作。
通过将主样式表 nv.d3.min.css 从 nvd3 节点模块复制到我的项目文件夹并在我的索引页面中链接它来修复此问题。