Diagramm X-Achsen-Tick in c3-Diagrammen

Question

Ich benutze C3 Balkendiagramme jetzt habe ich ein Problem mit X-Achse Tick. Ich nehme Wert der X-Achse dynamisch.

ein code:

chart = c3.generate({ 
    bindto: '#port_range_to_port_range', 
    data: { 
     x: 'x', 
     columns: [ 
      ['x','Ho Chi Minh City', 'Tanjung Priok (Jakarta)', 'Chennai', 'Chennai', 'Chennai'], 
      ['Your lowest rate', 530, 800, 900, 525, 190], 
      ['Benchmark rate', 241, 890, 254, 100, 149], 
      ['Lowest rate on route',200, 859, 256, 365, 410], 
     ], 
     type: 'bar' 
    }, 
    axis: { 
     x: { 
      type: 'category' // this needed to load string x value 
     }, 
     y: { 
      tick: { 
       format: d3.format("$,") 
      } 
     } 
    }, 
    legend: { 
     show: false 
    } 
}); 

Sie die oben sehen kann ich verwendet habe "Chennai" dreimal in der X-Achse. Siehe unten für weitere

columns: [ 
      ['x','Ho Chi Minh City', 'Tanjung Priok (Jakarta)', 'Chennai', 'Chennai', 'Chennai'], 

So Problem ist, wenn Diagramm plotten dann diese doppelten Wert nicht angezeigt wird, diese (Chennai) ist die Anzeige nur einmal und Ruhezeiten seiner die Zahlen zu drucken. Siehe beigefügte Grafik

Answer 1

Wie wir oben in den Kommentaren herausgefunden haben, beginnt c3.js, 0.4.11 gleiche Kategorien zu gruppieren.

Schnelle Abhilfe wird entweder vorherige Version verwenden, oder fügen Sie zusätzliche Leerzeichen Kategorienamen sie tatsächlich machen unterscheiden, aber bleiben optisch identisch:

columns: [['x', 
    'Ho Chi Minh City', 
    'Tanjung Priok (Jakarta)', 
    'Chennai', 
    'Chennai ', // <-- here 
    'Chennai ' // <-- and here 
], 

Wenn Sie es dynamisch tun wollen, geeignetere Lösung kann sein Hinzufügen Index, zu wiederholen Kategorien:

columns: [['x', ... some dynamic data ] 
    .map(function(category, i, arr){ 
     var prev = arr.slice(0, i); 
     var count = prev.reduce(function(sum, item) { 
     if (item === category) return sum + 1; 
     else return sum; 
     }, 0); 

     if (count != 0) return category + '-' + count; 
     else return category; 
    }) 
] 

// will give you 
// [['x', 'Ho Chi Minh City', 'Tanjung Priok (Jakarta)', 
// 'Chennai', 'Chennai-1', 'Chennai-2']] 

See updated fiddle