使用时间序列时，堆积条形图在 c3js 中重叠

Question

在使用类型作为时间序列时，我遇到了 c3js 中重叠的问题

OUTPUT screenshot of Below code

如下图所示，我添加代码也供您参考

      var chart = c3.generate({
      bindto: '#chart',
    data: {
        //x : 'indicator',
         xFormat: '%Y%m%d',
         json: [
            { 'indicator': '20160101', 'total': 100 ,'total2': 130 ,'total3': 10 },
            { 'indicator': '20160211', 'total': 200,'total2': 136 ,'total3': 50 },
            { 'indicator': '20150518', 'total': 300,'total2': 230 ,'total3': 60 },
             { 'indicator': '20160111', 'total': 100 ,'total2': 130 ,'total3': 10 },
            { 'indicator': '20161212', 'total': 200,'total2': 136 ,'total3': 50 },
            { 'indicator': '20160528', 'total': 300,'total2': 230 ,'total3': 60 },
             { 'indicator': '20141101', 'total': 100 ,'total2': 130 ,'total3': 10 },
            { 'indicator': '20161211', 'total': 200,'total2': 136 ,'total3': 50 },
            { 'indicator': '20160418', 'total': 300,'total2': 230 ,'total3': 60 }
        ],
        groups: [
            ['total','total2','total3']
        ],
        keys: {
            x: 'indicator',
            value: ['total','total2','total3']
        },
         type: 'bar',
         order: 'asc'
    },
     zoom: {
        enabled: true
    },
    axis: {
            x: {
           // type: 'category', 
           type : 'timeseries',
               tick: {
                fit: true,
                outer: false,
            // format: function (x) {
                  //  if (x.getDate() === 1) {
                  //      return x.toLocaleDateString();
                  //  }
                  //     }
                format: function (x) { return x.getFullYear(); }
        }
    }
    },
     bar: {
        width: {

            // 6 - items in dataset part of bar width calcuation
            // 28 - items that should have been considered in dataset # of
            //      months between start and end
            // 0.6 - the default bar.with.ratio
           // ratio: 6 / 28 * 0.6
           ratio:0.5
        }
    }
});

你能帮忙吗？

提前谢谢你

Answer 1

这些条形将重叠，您的两个数据点在覆盖 2 年以上的域上仅相隔 1 天。要停止这 2 个重叠，您需要在 800 像素宽的图表显示上将宽度设为 1 像素。

替代方案是： 1）使它成为一个折线图（但轴标签仍然重叠） - 最简单 2）使其成为类别图表而不是时间序列图表。你会失去约会之间的距离感，但这就是导致你问题的首要原因

您需要先对数据进行排序，我看不到用于排序类别的 c3 命令

  var data = [
        { 'indicator': '20160101', 'total': 100 ,'total2': 130 ,'total3': 10 },
        { 'indicator': '20160211', 'total': 200,'total2': 136 ,'total3': 50 },
        { 'indicator': '20150518', 'total': 300,'total2': 230 ,'total3': 60 },
         { 'indicator': '20160111', 'total': 100 ,'total2': 130 ,'total3': 10 },
        { 'indicator': '20161212', 'total': 200,'total2': 136 ,'total3': 50 },
        { 'indicator': '20160528', 'total': 300,'total2': 230 ,'total3': 60 },
         { 'indicator': '20141101', 'total': 100 ,'total2': 130 ,'total3': 10 },
        { 'indicator': '20161211', 'total': 200,'total2': 136 ,'total3': 50 },
        { 'indicator': '20160418', 'total': 300,'total2': 230 ,'total3': 60 }
    ];
    data.sort (function(a,b) {
        if (a.indicator  > b.indicator) return 1;
        if (a.indicator < b.indicator) return -1;
        return 0;
    })

所以 json 变为 json: data 并在稍后在您使用的图表声明中：

    axis: {
            x: {
                type: 'category', 
                tick: {
                    // can change the formatting at this point
                    format: function(x) { return this.api.categories()[x]; }
                }
        }
    },
     bar: {
        width: {
           ratio:0.8
        }
    }