Question

我在使用type as timeseries

时遇到了在c3js中重叠的问题

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

      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天。要停止这两个重叠，您需要在图表的800px宽显示屏上将宽度设置为1px。

替代方案是： 1）使其成为折线图（但轴标签仍然重叠） - 最简单 2）将其设为类别图表而不是时间序列图表。你失去了日期之间的距离感，但这首先导致了你的问题

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

<products>
    <deleted-assignment>
        <pm-identifier>MGRTN0000004999999</pm-identifier>
        <article-number>000000000004999995</article-number>
        <structure-system-identifier>Web Structure</structure-system-identifier>
        <structure-group-identifier>M010010080002</structure-group-identifier>
    <delete>true</delete>
    </deleted-assignment>
    <product>
            <pm-identifier>MGRTN0000004999999</pm-identifier>
        <prod-status>CREATED</prod-status>
        <val-status>Valid</val-status>
            <dup-status>Unique</dup-status>
        <con-status>New</con-status>
        <im-status>New</im-status>
        <wcs-status>New</wcs-status>
        <article-number>000000000004999995</article-number>
        <art-category>GA</art-category>
        <auto-order>No</auto-order>
        <archived>No</archived>
   </product>
</product>

所以json变为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: data

Stackedbars图表在使用时间序列时在c3js中重叠

1 个答案: