如何消除C3.js时间序列柱状图中非连续日期的空白间隔

我来帮你搞定这个问题～你遇到的情况是C3.js默认的时间序列轴会自动补全日期范围内的所有缺失日期，导致出现空白柱子。要解决这个问题，只需要调整x轴的类型配置就行：

解决方案思路 #

把x轴的类型从timeseries改为category，这样图表就会严格按照你提供的日期列表来渲染，不会自动填充那些没有数据的空白日期。需要注意的是，使用category类型时，你要保证自己提供的日期顺序是正确的，因为它会完全按照你传入的顺序展示。

修改后的代码 #

var chart = c3.generate({
    data: {
        x: 'x',
        type: 'bar',
        columns: [
            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-07', '2013-01-09', '2013-01-10', '2013-01-11'],
            ['data1', 30, 200, 100, 400, 150, 250, 250, 250, 250],
            ['data2', 130, 340, 200, 500, 250, 350, 250, 250, 250]
        ]
    },
    axis: {
        x: {
            type: 'category', // 这里把timeseries改成category
            tick: {
                format: '%Y-%m-%d' // 保留日期格式配置，确保显示正确
            }
        }
    }
});

效果说明 #

修改后，图表只会渲染你提供的9个日期对应的柱子，像2013-01-06、2013-01-08这些没有数据的日期就不会再出现空白柱子了，完全符合你的非连续日期需求。

内容的提问来源于stack exchange，提问作者al404IT