如何消除 C3 时间序列图表中的差距？

Question

我有一个使用 C3 创建的时间序列图表。该图表的数据存在时间间隔，这在条形图中非常明显。

是否可以消除间隙？我渲染图表如下所示。注意 2013-01-03 和 2013-01-06

之间的差距

var chart = c3.generate({
    data: {
        x: 'x',
        type: 'bar',
        columns: [
            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-06', '2013-01-07', '2013-01-08'],
            ['data1', 30, 200, 100, 400, 150, 250]
        ]
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d'
            }
        }
    }
});

DEMO http://jsfiddle.net/4nar0rne/1/

提前致谢。

Answer 1

如果您不想统一绘制点而不是基于 x 值之间的距离，则可以使用类别轴而不是时间序列轴。

var chart = c3.generate({
    data: {
        type: 'bar',
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250]
        ]
    },
    axis: {
        x: {
            type: 'category',
            categories: ['2013-01-01', '2013-01-02', '2013-01-03', '2013-01-06', '2013-01-07', '2013-01-08']
        }
    }    
});

但是请注意，您失去了拥有时间序列轴的所有优势（根据时间值、排序等间隔的条）。

Fiddle - http://jsfiddle.net/sb5p0scL/

如果您希望刻度与标签的中心对齐，您可以像这样使用 axis.x.centered

...
axis: {
    x: {
       tick: {
           centered: true
       }
       ...

Fiddle - http://jsfiddle.net/rc0uhf1y/

如何消除 C3 时间序列图表中的差距？

How to remove gaps in C3 timeseries chart?

d3.js

charts

c3

c3.js