修改

Question

在我的数据中，我有： data = [d1，d2，d3，d4，d5，d6，....，d100]; （d1-d100是int或float） labels = [v1，v2，v3，...，v100]; （v1 - v100是字符串，C3.js中的类别）

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

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

我试图将隐形标签设为空字符串＆＃34;＆＃34;，但在C3图表中，可见标签无法正确显示，因为空字符串占用图表中的空格，即使它们是空的。 / p>

我在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。

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

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

1 个答案:

修改