如何在 angular nvd3 中隐藏 y 轴并从 x 轴移除刻度

Question

我正在使用 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
  },

http://plnkr.co/edit/6t5bky?p=preview

Answer 1

您可以使用 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 图表，但从未尝试隐藏任何轴或网格线。没有网格线的图表似乎不错.. :)

Answer 2

使用 angular NVD3 上已有的图表选项很容易解决这个问题。要获得 y 轴只需添加 showYAxis: false, 并隐藏 x 轴刻度只需添加

tickFormat: function(d) {
      return null
    },

进入您的 xAxis 选项。这是一个分叉的 plunker，其中包含您正在寻找的选项 ;)

如何在 angular nvd3 中隐藏 y 轴并从 x 轴移除刻度

How to hide the y-axis and remove ticks from x-axis in angular nvd3

angularjs

charts

nvd3.js

angularjs-nvd3-directives