Пытается создать сгруппированную и сложную гистограмму, но с некоторой неприятностью

Question

Я пытаюсь создать сгруппированную и сложную гистограмму, но с небольшими проблемами понимаю, как это сделать с помощью c3js. Этот урок замечательный и показывает мне хорошо сгруппированную диаграмму.

http://blog.trifork.com/2014/07/29/creating-charts-with-c3-js/

Я ищу что-то подобное, но чтобы этот сложенный 2 набора данных за бар. Мои данные выглядит следующим образом:

columns: [ 
    ['x', 'data1', 'data2'], 
    ['Jan', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}] 
    ['Feb', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}] 
    ['Mar', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}] 
] 

Я хотел бы диаграмму, чтобы иметь группы Ян, февраль, март Тогда есть 3 бара сложенных меченых внутри каждой группы. Любые идеи, если это возможно и как это возможно, если вообще.

Спасибо!

Answer 1

Вы хотите что-то вроде этого? ->

http://jsfiddle.net/3r39gknt/1/

Если да, то data1 и data2 полей будет нуждаться переименованы в примере. Если нет, нарисуйте/сканируйте изображение/эскиз того, что вы ожидаете - группы в c3 - это элементы данных, участвующие в каждом стеке, но я правильно или неправильно интерпретировал ваше использование групп «месяц» как разные точки на ось х.

var chart = c3.generate({ 
    data: { 
     columns: [ // randomish data 
      ['data1', 30, 200, 200], 
      ['data2', 130, 100, 100], 
      ['data3', 230, 220, 200], 
      ['data4', 230, 220, 200], 
      ['data5', 230, 200, 210], 
      ['data6', 230, 190, 200] 
     ], 
     type: 'bar', 
     groups: [ 
      ['data1', 'data2'], 
      ['data3', 'data4'], 
      ['data5', 'data6'], 
     ], 
     order: null, 
     colors: { 
      data1: '#f00', 
      data2: '#00f', 
      data3: '#f33', 
      data4: '#33f',    
      data5: '#f66', 
      data6: '#66f' 
     } 
    }, 
    bar: { 
     width: { 
      ratio: 0.5 // this makes bar width 50% of length between ticks 
     } 
    }, 
    axis: { 
     x: { 
      type: 'category', 
      categories: ['january', 'february', 'march'] 
     } 
    } 
});