【问题标题】：C3.js x-axis show every other categoriesC3.js x 轴显示所有其他类别
【发布时间】：2015-05-20 22:13:07
【问题描述】：

在我的数据中，我有：数据 = [d1, d2, d3, d4, d5, d6, ...., d100]; （d1-d100 是整数或浮点数）标签 = [v1, v2, v3, ..., v100]; （v1 - v100 是字符串，C3.js 中的类别）

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

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

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

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

有更好的解决方案吗？

【问题讨论】：

标签： javascript d3.js graph c3.js

【解决方案1】：

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

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

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

这是一个基本的小提琴：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
                }
            }
        }
    }

【讨论】：

我试过这个，但没有帮助。我也试过.count，但它不起作用。我所拥有的是一个字符串列表。字符串是日期，但不是单个日期。它看起来像“2015-01-12-2015-02-01”。我不想垂直显示它。事件我使用一个函数来显示每 5 个字符串，那些不显示的仍然发生，这使得显示的字符串必须是垂直的。另请参阅您的示例，“cat1”和“catx”是垂直的，catx 中的 x 几乎被覆盖。
如果将第 13 个值更改为“catxxxxxxxxxx”，则图表中仅显示“catx”。 C3.js 让事情变得更容易，但更难改变。