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次“Chennai”。更多内容见下文

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

所以问题是，当图表将绘制时，这些重复值没有显示，这个（Chennai）只显示一次，休息时间打印数字。见附图

Answer 1

正如我们在上面的 cmets 中发现的那样，由于 0.4.11 c3.js 开始将相同的类别归为一个。

快速的解决方法是使用以前的版本，或者在类别名称中添加额外的空格以使它们实际上不同但在视觉上保持相同：

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