How to remove gaps in C3 timeseries chart?

问题

I have a timeseries chart created with C3. The chart has time gaps in the data, and this is very noticeable with a bar chart.

Is it possible to remove the gaps? I render the chart as shown below. Notice how there's a gap between 2013-01-03 and 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/

Thank you in advance.

回答1:

If you don't want the points to be plotted uniformly instead of based on the distance between the x values, you can use a category axis instead of a timseries axis.

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']
        }
    }    
});

However do note that you lose all the advantages of having a timeseries axes (bars spaced according to the time value, ordering, etc.).

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

And if you want the ticks to align with the center of the label you can use axis.x.centered like so

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

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

来源：https://stackoverflow.com/questions/32275222/how-to-remove-gaps-in-c3-timeseries-chart

标签

d3.js

charts

c3.js