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

Question

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

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

用于隐藏 x 轴刻度

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

score 3 · Accepted Answer

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

.nv-y text {
  display: none;
}

您可以删除网格线，

.tick {
  display: none;
}

更新：

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

.nv-y {
    display: none;
}

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

.tick line {
      display: none;
    }

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

score 2 · Accepted Answer

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

tickFormat: function(d) {
      return null
    },

进入您的xAxis选择。这是一个带有您正在寻找的选项的分叉plunker ;)

2 回答 2