C3 Гистограмма х-метки оси слишком перегружены

Question

Я создал СТОЛБЧАТЫЙ используя C3 JS плагин, граф работает нормально, но проблема с й-лейбл оси выглядит слишком перегруженные, как, как показано ниже

Working JSFiddle

Мой код, как указано ниже

var chart = c3.generate({ 
     bindto: "#chart", 
    data: { 
     x : 'x', 
     columns: [ 

['x', "2016-04-01","2016-04-08","2016-04-15","2016-04-22","2016-04-29","2016-05-06","2016-05-13","2016-05-20","2016-05-27","2016-06-03","2016-06-10","2016-06-17","2016-06-24","2016-07-09","2016-07-10","2016-07-11","2016-07-12","2016-07-13","2016-07-15","2016-07-16","2016-07-17","2016-07-18","2016-07-19","2016-07-20","2016-07-21","2016-07-22","2016-07-23","2016-07-24","2016-07-25","2016-07-26","2016-07-27","2016-07-28","2016-07-29","2016-07-30","2016-07-31","2016-08-01","2016-08-02","2016-08-03","2016-08-04","2016-08-05","2016-08-06","2016-08-07","2016-08-08","2016-08-09","2016-08-10","2016-08-11","2016-08-12","2016-08-13","2016-08-14","2016-08-15","2016-08-16","2016-08-17","2016-08-18","2016-08-19","2016-08-20","2016-08-21","2016-08-22","2016-08-23","2016-08-24","2016-08-25","2016-08-26","2016-08-27","2016-08-28","2016-08-29","2016-08-30","2016-08-31","2016-09-01","2016-09-02","2016-09-03","2016-09-04","2016-09-05","2016-09-06","2016-09-07","2016-09-08","2016-09-09","2016-09-10","2016-09-11","2016-09-12","2016-09-13","2016-09-14","2016-09-15","2016-09-16","2016-09-17","2016-09-18","2016-09-19","2016-09-20","2016-09-21","2016-09-22","2016-09-23","2016-09-24","2016-09-25","2016-09-26","2016-09-27","2016-09-28","2016-09-29","2016-09-30","2016-10-01","2016-10-02","2016-10-03","2016-10-04","2016-10-05","2016-10-06","2016-10-07","2016-10-08","2016-10-09","2016-10-10","2016-10-11","2016-10-12","2016-10-13","2016-10-14","2016-10-15","2016-10-16","2016-10-17","2016-10-18","2016-10-19","2016-10-20","2016-10-21","2016-10-22","2016-10-23","2016-10-24","2016-10-25","2016-10-26","2016-10-27","2016-10-28","2016-10-29","2016-10-30","2016-10-31","2016-11-01","2016-11-02","2016-11-03","2016-11-04","2016-11-09"], 
['pv1', 2500,2500,2500,2500,2500,2500,2500,2500,2500,2500,2500,2500,2500,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2696,2748,2748,2694,2694,2694,2694,2694,2694,2694,2668,2668,2668,2668,2576,2572,2572,3043,3084,3084,3084,3084,3084,3156,3521,3521,3550,3542,3542,3573,3580,3629,3579,3584,3542,2757,2791,2696,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3415,3414,3414,3414,3414,3414,3414,3414,3414,3414,3414,3414,3414,3414,3369,3376,3371,3373,3371,3379,3363,3373,3347,3348,3382,3402,3410,3434,2579,2579,2369], 
['pv2', 1750,1750,1750,1750,1825,1850,1975,2150,2375,2425,2475,2500,2500,2087,2087,2087,2087,2091,2087,1767,1767,1767,1633,1498,1498,1642,1637,1633,1609,1841,1713,1702,1862,1888,1888,1888,1949,1976,1977,2014,2014,2014,1946,1966,1973,2224,2252,2318,2318,2318,2327,2373,2513,2535,2543,2534,2539,2823,2849,2990,3142,3142,3108,2513,2687,2678,2856,2860,2861,2862,2866,2869,2870,2875,2874,2874,2874,2879,2885,2886,2883,2889,2896,2895,2899,2903,2909,2911,2913,2913,2913,2916,2922,2933,2937,2943,2942,2943,2947,1811,1826,1837,1840,1840,1841,1843,1511,1854,1853,1851,1852,1853,1849,1852,1874,1857,1883,1886,1888,1904,1903,1924,1947,2060,2068,2068,2082,1582,1344,836,839,788] 
], 
     type: 'bar' 
    }, 
    axis: { 
     x: { 
      type: 'category', 
      tick: { 
       rotate: -60, 
       multiline: false 
      }, 
      height: 130 
     } 

    } 
}); 

Может кто-нибудь пожалуйста, скажите мне решение этой

Что я сделал, чтобы решить его

я использовал таймсерия типа вместо категории типа, после того, что вопрос ярлык был решен, но граф был уже plottted с более белые пространства для марта месяца, как, как показано ниже

Working JSFiddle

Answer 1

Одним из возможных решений может быть использование меток по оси x только по требуемым индексам только &, оставляя другие пустыми.

['x', "2016-04-01","","","","2016-04-29","","","",...] 
['pv1', 2500,2500,2500,2500,2500,2500,2500,2500,...] 
['pv2', 1750,1750,1750,1750,1825,1850,1975,2150,...] 

Вы можете расположить ярлыки так, чтобы они фиксировали дату и в то же время хорошо выглядели.

Answer 2

Вы можете использовать для этого значение количества отсчетов для c3, поэтому здесь мы говорим 20 ярлыков.

Однако в этом тике есть добавленная информация о том, что теперь разрешение на значение дробной категории не будет отображаться, т. Е. 2-й равноотстоящий тик из 20 может быть 2.6667-м элементом оси x - вам нужно чтобы иметь небольшую функцию формата, которая настраивается для этого, иначе вы просто получите конец и начнете метки. (Или вы можете выяснить количество тиков, который делит на нужные вам данные + 1 как целое число.)

tick: { 
    format: function (x) { 
     var cats = this.api.categories(); 
     return cats[Math.round(x)]; 
    }, 
    count: 20, 
    rotate: -60, 
    multiline: false 
}, 

http://jsfiddle.net/fz0t10yb/7/