使用nvd3-ng2

时间:2016-11-29 12:22:37

标签: javascript angular nvd3.js gridlines ng2-nvd3

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

我测试了这个,即使是"基本用法"中的示例离散条形图。自述文件的部分在ng2-nvd3的github页面上。

任何想法导致了什么?我有一个非常简单的angular2站点设置,除了bootstrap之外的最小样式,以及非常小的HTML。即使删除了所有样式,问题仍然存在。

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

Screenshot showing problems with sample bar chart from readme

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

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

示例应用程序是展示问题的最小MEAN项目。要运行项目:

  • 复制到本地文件夹
  • npm install
  • npm run build
  • npm start

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

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

1 个答案:

答案 0 :(得分:0)

好的,事实证明我错过了所需的样式,因为在我实现的最终版本中使ng2-nvd3工作所需的Webpack解决方法。

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