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轴上使用了三次“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

图表X轴在c3图表中打勾

1 个答案: