c3.js - C3js时间序列图表生成重叠条

Question

我的 CSV 数据的时间序列图生成重叠条。图书馆有问题吗？附加图像、我的代码和我的 CSV 数据（在代码中使用之前将其解析为 JSON final_data）。

var chart = c3.generate({
    bindto: '#chart',
    data: {
        x: 'date',
        xFormat: '%m/%d/%y %I:%M %p',
        json: final_data,
        keys: {
            x: 'date',
            value: values
        },
        type: 'bar',
        groups: val
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%b %d',
                centered: true,
                fit: true
            }
        }
    },
    zoom: {
        enabled: true
    },
    color: {
        pattern: colors
    }
});

这是我拥有的 CSV 数据。

Time Series,Category,Duration
6/24/15 12:00 AM,Post Processor,0
6/24/15 12:00 AM,Response Processing,8
6/24/15 12:00 AM,External Calls,168
6/24/15 12:00 AM,Internal Processing,16
6/24/15 12:00 AM,Pre Processor,0
10/1/14 12:00 AM,Post Processor,0
10/1/14 12:00 AM,Response Processing,0
10/1/14 12:00 AM,External Calls,0
10/1/14 12:00 AM,Internal Processing,5
10/1/14 12:00 AM,Pre Processor,0
5/15/15 12:00 AM,Post Processor,0
5/15/15 12:00 AM,Response Processing,0
5/15/15 12:00 AM,External Calls,0
5/15/15 12:00 AM,Internal Processing,5
5/15/15 12:00 AM,Pre Processor,0

Answer 1

在数据之后使用 bar

bar: {
        //width: {
           // ratio: 0.3 // this makes bar width 50% of length between ticks
      //  }
     
        width: 15 // this makes bar width 100px
    },

你可以参考这个http://c3js.org/samples/chart_bar.html

Answer 2

我遇到了同样的问题，您可以通过以下方式解决：

var time = ['6/24/15 12:00', '6/24/15 12:00', ...]
var chart = c3.generate({
bindto: '#chart',
    data: {
        columns: [
            ['bar1', 3, 4, 5, 6, 7],
            ['bar2', 2, 3, 4, 5, 6],
            ['bar3', 1, 2, 3, 4, 5]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.8
        }
    },
    axis: {
        x: {
            tick: {
                count: time.length,
                format: (i) => time[i]
            }
        }
    },
...
});

要点是根本不使用时间序列，而是使用刻度属性并按索引为每个柱堆栈返回值。

Answer 3

这似乎是一个错误，时间序列步骤必须是恒定的。您可以添加空值来绕过它。