C3js：如何隐藏 y 轴上的刻度？ Y轴标签被切断答案

【问题标题】：C3js: How to hide ticks on y-axis? Y-Axis label is cut offC3js：如何隐藏 y 轴上的刻度？ Y轴标签被切断
【发布时间】：2014-12-04 12:29:53
【问题描述】：

如何隐藏 y 轴上的刻度？

我目前通过编辑tick.format 来实现它，可以在这个JSFiddle 中看到http://jsfiddle.net/DanielApt/bq17Lp02/1/

我对这个解决方案不满意，因为 y 轴标签被切断了

那么如何在不切断 y 轴标签的情况下隐藏刻度？

提前感谢您的帮助！

【问题讨论】：

标签： javascript c3.js

【解决方案1】：

1) 尝试将axis.y.tick.count 设置为1，这样除了top 和bottom most 之外不会显示任何刻度。

2) 或者尝试使用 CSS 来处理除顶部和底部之外的所有中间刻度，例如：-

.c3-axis-y .tick {
   display: none;
}

如果轴标签定位有问题，请尝试将其定位在其他位置，例如：-

axis: {
    x: {
        label: {
            text: 'X Label',
            position: 'outer-center'
            // inner-right : default
            // inner-center
            // inner-left
            // outer-right
            // outer-center
            // outer-left
        }
    },

这是工作代码：- http://jsfiddle.net/chetanbh/24jkmvL5/

参考网址：http://c3js.org/samples/axes_label_position.html

【讨论】：

【解决方案2】：

如果有人仍然需要它，我将它放在 onrendered 回调中以避免影响所有图表：

onrendered: function() {
      d3.select("#myChartContainer").selectAll(".c3-axis-x .tick line").style("display", "none");
}

【讨论】：

【解决方案3】：

最后我结合了Chetan的答案和一些进一步的工作：

我隐藏了蜱虫：

.c3-axis-y .tick {
   display: none;
}

我设置了刻度格式：

axis.y.tick.format = function(){return 'fy'; }
//return characters with both ascenders and descenders

请参阅此 JS Fiddle http://jsfiddle.net/DanielApt/etuwo8mz/1/ 了解实际解决方案。

【讨论】：

你也可以在方法中这样做：`onrendered: function() { d3.selectAll(".c3-axis.c3-axis-y .tick") .style("fill", “没有任何”）; } `