我正在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;
}