如何删除 nvd3.js 中的背景网格线

How do you remove the background gridlines in nvd3.js?

本文关键字：js 背景 网格线 nvd3 何删除 删除      更新时间：2023-09-26

我正在nvd3.js中制作一个条形图，类似于这个例子：http://nvd3.org/ghpages/discreteBar.html。我想知道是否有办法删除网格线，以便背景为纯白色。所有示例都使用网格线。我还检查了源代码，在离散Bar模型中没有看到任何可以做到这一点的东西。

.tick {
  opacity: 0;
}

不适用于离散条形图中的垂直线，因为它们使用内联 css 将不透明度设置为 1。但这有效：

.tick {
  display: none;
}

这也将隐藏轴上的标签。如果要删除行但保留标签，请使用：

.tick line {
  display: none;
}

您可以在 CSS 中选择这些网格线并将其不透明度设置为 0：

.tick {
  opacity: 0;
}

如果仍想查看基线，可以将其修改为：

.tick:not(.zero) {
  opacity: 0;
}

使用浏览器的检查器工具查看要修改的各个元素具有的类，并使用 CSS 的强大功能。

我找到了一个更具体的解决方案，效果很好：

（这将删除所有网格，但您可以有选择性，即：.y1.axis）

.nvd3.multiChart .axis .nv-axis line {
stroke: none;
fill: none;
}

摆脱准则并保持标签使用

.tick line {
  opacity: 0;
}

只需要更新 CSS 

.tick line {
display: none;
}
相关文章：