javascript - c3js，X 轴被压碎且格式错误

Question

目前我正在玩这个例子: http://c3js.org/samples/axes_x_tick_culling.html

但问题是，当您添加 3-4 倍的数据量时，X 值会被破坏且格式错误。我该如何解决这个问题？

请参见此处:https://i.sstatic.net/gzrTR.png

谢谢。

Answer 1

宽度对我来说工作正常，看看 X axis with tripple digit numbers

enter link description here

var chart = c3.generate({
data: {
    columns: [
        ['sq', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]

]

},
axis: {
    x: {
        type: 'category',
        tick: {
        width: 22,
            culling: {
                max: 7 
            }
        }
    }
}

});