Versuchen, ein gruppiertes und gestapeltes Balkendiagramm zu erstellen, aber einige Probleme zu haben

Question

Ich versuche, ein gruppiertes und gestapeltes Balkendiagramm zu erstellen, aber ein wenig Mühe zu haben, zu verstehen, wie man das mit c3js macht. Dieses Tutorial ist großartig und zeigt mir ein gut gruppiertes Diagramm.

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

Ich suche nach etwas ähnlich, aber diese gestapelt 2 Datensätze pro bar haben. Meine Daten wie folgt aussehen:

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}] 
] 

ich das Diagramm haben möchte Gruppen von Jan, Feb, März hat dann drei gestapelte Balken innerhalb jeder Gruppe markiert. Irgendwelche Ideen, wenn dies möglich ist und wie es möglich ist, wenn überhaupt.

Danke!

Answer 1

Wollen Sie so etwas? ->

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

Wenn ja, werden die Daten 1 und Daten 2 Felder müssen pro Beispiel umbenannt. Wenn nicht, zeichne/scanne ein Bild/eine Skizze von dem, was du erwartest - Gruppen in c3 sind die Datenelemente, die an jedem Stapel beteiligt sind, aber ich habe richtig oder falsch deine Verwendung von Monatsgruppen als unterschiedliche Punkte auf der X-Achse.

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'] 
     } 
    } 
});