如何清除C3时间序列图中的空白？ [英] How to remove gaps in C3 timeseries chart?

问题描述

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

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.

是否可以消除这些间隔？我绘制如下图所示的图表。请注意 2013-01-03 与 2013-01-06

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

演示 http://jsfiddle.net/4nar0rne/1/

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

谢谢。

推荐答案

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

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.).

小提琴- http：/ /jsfiddle.net/sb5p0scL/

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

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
       }
       ...

小提琴- http://jsfiddle.net/rc0uhf1y/

这篇关于如何清除C3时间序列图中的空白？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！