c3js, ось X раздавлены и плохо отформатированный

Question

В настоящее время я играю Arround с этим примером: http://c3js.org/samples/axes_x_tick_culling.html

Но вопрос, когда вы добавляете как 3-4x сумма данных, значения X помялась и плохо форматированию. Как я могу исправить эту идею?

Смотрите здесь: http://i.imgur.com/F7BWMDk.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 
      } 
     } 
    } 
} 

});

Answer 2

Здесь вы найдете , вам нужно добавить параметр tick.width. Это еще не была документирована (мы работаем над этим)

var chart = c3.generate({ 
 
    data: { 
 
     columns: [ 
 
         ['sq', 30, 200, 100, 400, 150, 11,11,11,11,111,11,11,11,22,22,22,22,22,223,43,32,14,250, 30,31, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]] 
 
     
 
    }, 
 
    axis: { 
 
     x: { 
 
      type: 'category', 
 
      tick: { 
 
       culling: true, 
 
       width: 11 
 
      } 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="chart"> 
 
</div>

var chart = c3.generate({ 
data: { 
    columns: [ 
        ['sq', 30, 200, 100, 400, 150, 11,11,11,11,111,11,11,11,22,22,22,22,22,223,43,32,14,250, 30,31, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]] 

}, 
axis: { 
    x: { 
     type: 'category', 
     tick: { 
      culling: true, 
      width: 11 
     } 
    } 
} 

});

jsfiddle