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

我使用C3.js绘制下面的图，但几个月的名字不被连续显示在x轴上即使数据显示，请让我知道我怎么能解决这个问题为x轴数据应该像[MAR-2017四月至2017年，5月2017年，6月2017年，7月2017年...等等]C3.js：月的名称并未显示连续

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

来源

2017-09-19 sakshi

请提供一些代码你试过 –

尝试x轴类型作为类别。 http://c3js.org/reference.html#axis-x-type –

我已经使用'timeseries'类型的x轴 – sakshi

尝试设置axis.x.tick.culling到假：

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

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

来源

2017-09-19 10:16:33

谢谢这是工作 – sakshi

不客气！请标记接受的答案。 –

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

快乐编码

来源

2017-09-19 07:56:27

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

回答

相关问题