我正在使用nvd3.js制作一张柱状图,类似于这个示例:http://nvd3.org/ghpages/discreteBar.html。我想知道是否有一种方法可以去除网格线,使背景变成纯白色。所有的示例都使用网格线。我还查看了源代码,没有在离散条形图模型中找到任何可以实现这一点的东西。
我正在使用nvd3.js制作一张柱状图,类似于这个示例:http://nvd3.org/ghpages/discreteBar.html。我想知道是否有一种方法可以去除网格线,使背景变成纯白色。所有的示例都使用网格线。我还查看了源代码,没有在离散条形图模型中找到任何可以实现这一点的东西。
.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;
}
style="opactity: 1"
具有优先权。 - craigbopacity: 0 !important;
覆盖内联样式。 - linqu