График таймсетов C3js генерирует перекрывающиеся бары

Question

График временных рядов для моих данных CSV создает перекрывающиеся бары. Есть ли проблема с библиотекой? Присоединение изображения, моего кода и моих данных CSV (который разбирается в JSON final_data перед использованием в коде).

var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
     x: 'date', 
     xFormat: '%m/%d/%y %I:%M %p', 
     json: final_data, 
     keys: { 
      x: 'date', 
      value: values 
     }, 
     type: 'bar', 
     groups: val 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: '%b %d', 
       centered: true, 
       fit: true 
      } 
     } 
    }, 
    zoom: { 
     enabled: true 
    }, 
    color: { 
     pattern: colors 
    } 
}); 

Вот данные CSV у меня есть.

Time Series,Category,Duration 
6/24/15 12:00 AM,Post Processor,0 
6/24/15 12:00 AM,Response Processing,8 
6/24/15 12:00 AM,External Calls,168 
6/24/15 12:00 AM,Internal Processing,16 
6/24/15 12:00 AM,Pre Processor,0 
10/1/14 12:00 AM,Post Processor,0 
10/1/14 12:00 AM,Response Processing,0 
10/1/14 12:00 AM,External Calls,0 
10/1/14 12:00 AM,Internal Processing,5 
10/1/14 12:00 AM,Pre Processor,0 
5/15/15 12:00 AM,Post Processor,0 
5/15/15 12:00 AM,Response Processing,0 
5/15/15 12:00 AM,External Calls,0 
5/15/15 12:00 AM,Internal Processing,5 
5/15/15 12:00 AM,Pre Processor,0 

Answer 1

использование бар с, после того, как данные, как

bar: { 
 
     //width: { 
 
      // ratio: 0.3 // this makes bar width 50% of length between ticks 
 
     // } 
 
     
 
     width: 15 // this makes bar width 100px 
 
    },

вы можете передать этот http://c3js.org/samples/chart_bar.html

Answer 2

Похоже bug, таймсерия ступенчато мну быть постоянным. Вы можете добавить нулевые значения, чтобы обойти его.

Answer 3

Я была такая же проблема, вы можете решить следующий способ:

var time = ['6/24/15 12:00', '6/24/15 12:00', ...] 
var chart = c3.generate({ 
bindto: '#chart', 
    data: { 
     columns: [ 
      ['bar1', 3, 4, 5, 6, 7], 
      ['bar2', 2, 3, 4, 5, 6], 
      ['bar3', 1, 2, 3, 4, 5] 
     ], 
     type: 'bar' 
    }, 
    bar: { 
     width: { 
      ratio: 0.8 
     } 
    }, 
    axis: { 
     x: { 
      tick: { 
       count: time.length, 
       format: (i) => time[i] 
      } 
     } 
    }, 
... 
}); 

Главное не использовать таймсерии вообще, а вместо этого использовать клещ свойство и возвращаемое значение для каждого стека бара по индексу.