Erstellen eines Balkendiagramms mit hohem und niedrigem Wert mit c3.js

Question

Ich habe c3.js seit ein paar Tagen untersucht. Es war in der Lage, Grafiken für die meisten meiner Bedürfnisse zu erstellen. Das Einzige, was ich nicht damit tun kann, ist, wie man ein Balkendiagramm anzeigt, wenn Sie hohe und niedrige Werte angegeben haben.

ex: meine Probe Array wird für jede Kategorie so etwas wie diese

Categories : ['cat1', 'cat2' ,'cat3' ,'cat4'] 
Low : [0,0,50,40] 
High : [90,80,40,60] 

Grundsätzlich jeder Stab wird auf diesen hohen und niedrigen Werten basieren.

Danke!

Answer 1

Sie dieses Beispiel ausprobieren können:

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['Low', 0,0,50,40], 
      ['High', 90,80,40,60] 
     ] 
    }, 
    axis: { 
     x: { 
      type: 'category', 
      categories: ['cat1', 'cat2', 'cat3', 'cat4'] 
     } 
    } 
}); 

Ergebnis:

Um zu wissen, wie c3.js zu installieren, lesen Sie bitte official documentation