チャートC3-チャートのX軸ティック

Question

私はC3バーチャートを使用していますが、X軸ティックの問題に直面しています。私はX軸の価値を動的に取っています。

コード以下を参照してください。

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

あなたは、私がX軸に「チェンナイ」3回使用している上に見ることができます。より

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

だから、問題は、グラフは、これらの重複する値が表示されていないプロットしますと、この（チェンナイ）が一つだけの時間を表示しているため、以下を参照してくださいと数字を印刷し、その時間を休みます。添付のグラフを参照

Answer 1

0.4.11 c3.jsは同じカテゴリを1つにグループ化し始めているので、上記のコメントで分かりました。

ファスト問題を回避するには、以前のバージョンを使用するか、またはそれらが実際に異なるが、視覚的に同じに滞在するために、カテゴリ名に余分なスペースを追加するのいずれかである：

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

あなたが動的にそれをしたい場合は、より適切な解決策がかもしれ繰り返しカテゴリにインデックスを追加：

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