Gestapelte Balkendiagramm-Balkenmaße sind nicht an der Y-Achse orientiert

Question

Ich versuche ein gestapeltes Balkendiagramm mit c3.js zu erstellen.

Das Problem, das ich habe, ist, dass die Bars, die generiert werden, nicht an der Y-Achse korreliert sind. Diese

ist das, was ich bisher: https://codepen.io/anon/pen/dZLMoY?editors=1010

Und das ist der Code:

c3.generate({ 
    bindto:'#chart', 
    data: { 
     type: 'bar', 
     columns: [ 
      ['Column 1', 2, 10, 22, 34, 9, 60], 
      ['Column 2', 6, 15, 43, 36, 45, 75], 
      ['Column 3', 10, 20, 79, 39, 50, 97], 
      ['Column 4', 12, 27, 87, 76, 55, 150] 
     ], 
     groups: [ 
      ['Column 1', 'Column 2', 'Column 3', 'Column 4'] 
     ], 
     }, 
     bar: { 
     width: 15, 
     }, 
     axis: { 
     x: { 
      show: true 
     }, 
     y: { 
      show: true, 
      padding: { 
      top: 0, 
      bottom: 0 
      }, 
      tick: { 
      //count: 6 
      }, 
      min: 0, 
      max: 150 
     } 
     }, 
     grid: { 
     x: { 
      show: true 
     }, 
     y: { 
      show: true 
     } 
     } 
}); 

Wie Sie das Balkendiagramm erzeugt wird sehen können, aber es ist nicht richtig erzeugt. Die letzten 4 Balken sind alle gleich, auch wenn die angegebenen Werte nicht übereinstimmen.

Unter Berücksichtigung, dass die Y-Achse bis 150 der Maximalwert eingestellt hat dann die 2., 3. und 4. Stäbe sollten nicht die gleiche Höhe wie die fünfte bar MESSE

Was mache ich falsch?

Answer 1

Ihr axis.y.max Wert ist kleiner als die gestapelte Summe, daher wird das Diagramm oben abgeschnitten.

Versuchen Sie folgendes:

c3.generate({ 
    ... 
     axis: { 
     ... 
     y: { 
      ... 
      min: 0, 
      max: 500 
     } 
     } 
    } 

Oder see it in action.