C3.js : 月份名称没有连续显示

Question

我正在使用 C3.js 绘制下图，但月份名称没有连续显示在 x 轴上，即使数据正在显示，请告诉我如何解决它 x 轴数据应该像 [mar-2017, April-2017,May-2017,June-2017,July-2017...so on]

 var chart = c3.generate({
    bindto: bindingElement,
    data: {
        x:'x',
        columns: plotData,
        order:false,
        type: 'bar',
        groups: datagroup
      },
            bar: {
        width: {
            ratio: 0.70 
        }
        },
      axis: {
        x: {
        type: 'timeseries',
          tick: {
            rotate: 30,
            format: '%b%Y'
          }
        }
      }
  });

Answer 1

试试这个JSFiddle

var chart = c3.generate({
bindto: '#chart',
data: {
    columns: [
        ['data1', 30000, 20000, 10000, 40000, 0, 0, 0, 0],
        ['data2', 0, 0, 0, 0, 15000, 25000, 50000, 10000], 
        ['data3', 0, 0, 0, 0, 15000, 25000, 50000, 10000]
    ],
    order:false,
    type: 'bar',
    groups:  [
        ['data2', 'data3']
    ]
  },
        bar: {
    width: {
        ratio: 0.70 
    }
    },
  axis: {
    x: {
    type: 'category',
    categories:["mar-2017" , "April-2017","May-2017","June-2017","July-2017","August-2017","September-2017","October-2017"],
      tick: {
        rotate: 30,
        format: '%b%Y'
      }
    }
  }
});

或者我认为 JSON 数据的日期格式不正确，您也可以尝试使用如下时间序列

var chart = c3.generate({
bindto: '#chart',
data: {
  x: 'x',
    columns: [
    ['x', '2017-01-01' , '2017-02-01','2017-03-01','2017-04-01','2017-05-01','2017-06-01','2017-07-01','2017-08-01'],
        ['data1', 30000, 20000, 10000, 40000, 0, 0, 0, 0],
        ['data2', 0, 0, 0, 0, 15000, 25000, 50000, 10000], ['data3', 0, 0, 0, 0, 15000, 25000, 50000, 10000]
    ],
    order:false,
    type: 'bar',
    groups:  [
        ['data2', 'data3']
    ]
  },
        bar: {
    width: {
        ratio: 0.70 
    }
    },
  axis: {
    x: {
    type: 'timeseries', 
      tick: {
        rotate: 30,
        format: '%b %Y'
      }
    }
  }
 });

编码愉快

Answer 2

尝试将 axis.x.tick.culling 设置为 false:

axis: {
  x: {
    tick: {
      culling: false
    }
  }
}

它可以防止 c3 隐藏特定的刻度。

C3.js : 月份名称没有连续显示

C3.js : Months name are not showing continuously

javascript

c3.js