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

正如我们在上面的评论中发现的那样，由于 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

c3 图表中的图表 X 轴刻度

Chart X-Axis tick in c3 charts

javascript

graph

c3.js