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

似乎是一个bug，时间序列步骤不变。你可以添加空值来绕过它。

Answer 3

我有同样的问题，你可以用下一个方法解决：

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

重点是不要使用时间序列，而是使用tick属性并按索引为每个条形堆栈返回值。

C3js时间序列图表生成重叠条

3 个答案: