Question

我正在使用C3.js绘制下图，但是即使数据显示，月份名称也不会在x轴上连续显示，请让我知道如何解决它对于x轴数据应该是[2017年3月，2017年4月，2017年5月，2017年6月，2017年7月......等等）

 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

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

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

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

Answer 2

试试这个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'
      }
    }
  }
 });

快乐编码

C3.js：月份名称未连续显示

2 个答案: