javascript - x轴文本重叠c3js

Question

当 x 轴的名称很大时，文本会重叠。有什么属性(property)可以解决这个问题吗？ Fit:true 不能解决问题。 Example

Answer 1

您可以使用 x 轴刻度旋转，例如:http://c3js.org/samples/axes_x_tick_rotate.html

还有另一种解决方案，您可以使用

multiline: true

var chart = c3.generate({
data: {
    x: 'x',
    columns: [
        ['x', 'www.somesitename1.com', 'www.somesitename2.com', 'www.somesitename3.com', 'www.somesitename4.com', 'www.somesitename5.com', 'www.somesitename6.com', 'www.somesitename7.com', 'www.somesitename8.com', 'www.somesitename9.com', 'www.somesitename10.com', 'www.somesitename11.com', 'www.somesitename12.com'],
        ['pv', 90, 100, 140, 200, 100, 400, 90, 100, 140, 200, 100, 400],
    ],
    type: 'bar'
},
axis: {
    x: {
        type: 'category',
        tick: {
            rotate: 0,
            multiline: true
        }
    }
}});