javascript - C3.js x 轴显示所有其他类别

Question

在我的数据中，我有: 数据 = [d1, d2, d3, d4, d5, d6, ...., d100]; (d1-d100 为 int 或 float) 标签 = [v1, v2, v3, ..., v100]; (v1 - v100 是字符串，C3.js 中的类别)

因为有 100 个标签，很难在 x 轴上显示所有标签，所以我只想显示每 5 个或每 10 个。

如果标签是整数，我可以在刻度中使用剔除； 如果标签是时间，我可以使用刻度计数； 但我没有看到任何类别的解决方案。

我尝试将不可见标签制作为空字符串“”，但在C3图中，可见标签无法正确显示，因为空字符串占用了图表中的空间，即使它们是空的。

我在 D3.js 中做了同样的事情。但我不想使用 d3.js，因为 C3.js 中的其他一些功能更好。

还有更好的解决办法吗？

Answer 1

您尝试过使用axis.x.tick.culling.max吗？

tick: {
    culling: {
        max: 2 // or whatever value you need
    }

如果您希望每 5 个刻度显示一次，并且总共有 100 个刻度，则可以将 max 的值设置为等于 100/5，即 20。

这是一个基本的 fiddle :http://jsfiddle.net/Ln83xd1k/4/

编辑

要使 x 轴标签在空间不足时不换行，请尝试添加 axis.x.tick.multiline = false，如下所示:

axis: {
        x: {
            type: 'category',
            categories: ['long category name goes here', 'cat2', 'cat3', 'cat4', 'cat5', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx', 'catx'],
            tick: {
                multiline:false,
                culling: {
                    max:2
                }
            }
        }
    }