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

【问题标题】：How to hide the y-axis and remove ticks from x-axis in angular nvd3如何在角度 nvd3 中隐藏 y 轴并从 x 轴移除刻度
【发布时间】：2015-12-07 06:35:11
【问题描述】：

我正在使用 angular nvd3 中的现有示例并尝试隐藏 y 轴并从 x 轴中删除刻度。所以，我浏览了文档并添加了 showYAxis="false" 并添加了刻度：null in x 轴对象。但是，我无法隐藏 y 轴以及从 x 轴上删除刻度。请找到下面的链接，让我知道我的错误。对于 y 轴：

 <nvd3 options="options" data="data" showYAxis="false"></nvd3>

用于隐藏 x 轴刻度

 xAxis: {
    axisLabel: 'X Axis',
    ticks: null
  },

【问题讨论】：

【解决方案1】：

您可以使用 css 样式移除 Y 轴。

.nv-y text {
  display: none;
}

您可以将网格线删除为，

.tick {
  display: none;
}

更新：

可以去掉上面样式中的text类看看效果。

.nv-y {
    display: none;
}

如果您想在 X 轴上显示每个条形的名称且不显示网格线，则以上述样式添加 line 类，

.tick line {
      display: none;
    }

P.S：我使用过 nvd3 图表，但从未尝试隐藏任何轴或网格线。没有网格线的图表似乎很好.. :)

【讨论】：

【解决方案2】：

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

tickFormat: function(d) {
      return null
    },

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

【讨论】：