如何在 angular nvd3 中隐藏 y 轴并从 x 轴移除刻度
How to hide the y-axis and remove ticks from x-axis in angular nvd3
我正在使用 angular nvd3 中的现有示例并尝试隐藏 y 轴并从 x-axis.So 中删除刻度线,我已经浏览了文档并添加了 showYAxis="false" 并在 x 轴对象中添加了 ticks: null。但是,我无法隐藏 y 轴以及从 x 轴上删除刻度。请找到下面的 link 并告诉我我的错误。
对于 y 轴:
<nvd3 options="options" data="data" showYAxis="false"></nvd3>
用于隐藏 x 轴刻度
xAxis: {
axisLabel: 'X Axis',
ticks: null
},
您可以使用 css 样式删除 Y 轴。
.nv-y text {
display: none;
}
您可以删除网格线,
.tick {
display: none;
}
更新:
可以去掉上面样式中的class text
看看效果
.nv-y {
display: none;
}
如果您想在 X 轴上显示每个条柱的名称并且没有网格线,请在上面的样式中添加 line
class 作为,
.tick line {
display: none;
}
参考:Whosebug
工作Plunker
P.S: 我使用过 nvd3 图表,但从未尝试隐藏任何轴或网格线。没有网格线的图表似乎不错.. :)
使用 angular NVD3 上已有的图表选项很容易解决这个问题。
要获得 y 轴只需添加 showYAxis: false,
并隐藏 x 轴刻度只需添加
tickFormat: function(d) {
return null
},
进入您的 xAxis
选项。
这是一个分叉的 plunker,其中包含您正在寻找的选项 ;)
我正在使用 angular nvd3 中的现有示例并尝试隐藏 y 轴并从 x-axis.So 中删除刻度线,我已经浏览了文档并添加了 showYAxis="false" 并在 x 轴对象中添加了 ticks: null。但是,我无法隐藏 y 轴以及从 x 轴上删除刻度。请找到下面的 link 并告诉我我的错误。 对于 y 轴:
<nvd3 options="options" data="data" showYAxis="false"></nvd3>
用于隐藏 x 轴刻度
xAxis: {
axisLabel: 'X Axis',
ticks: null
},
您可以使用 css 样式删除 Y 轴。
.nv-y text {
display: none;
}
您可以删除网格线,
.tick {
display: none;
}
更新:
可以去掉上面样式中的class text
看看效果
.nv-y {
display: none;
}
如果您想在 X 轴上显示每个条柱的名称并且没有网格线,请在上面的样式中添加 line
class 作为,
.tick line {
display: none;
}
参考:Whosebug
工作Plunker
P.S: 我使用过 nvd3 图表,但从未尝试隐藏任何轴或网格线。没有网格线的图表似乎不错.. :)
使用 angular NVD3 上已有的图表选项很容易解决这个问题。
要获得 y 轴只需添加 showYAxis: false,
并隐藏 x 轴刻度只需添加
tickFormat: function(d) {
return null
},
进入您的 xAxis
选项。
这是一个分叉的 plunker,其中包含您正在寻找的选项 ;)