2016-08-01 226 views
5

C3图形重叠的日期时间格式的x轴标签。我用Google搜索这个查询,但没有得到任何it.Is解决方案有可能,C3仅显示了几个日期时间而不是完全展示这导致重叠x轴标签enter image description hereC3图形重叠的x轴标签

var data = { 
    x: 'x', 
    xFormat:'%Y-%m-%d/%H:%M', 
    empty: { 
     label: { 
      text: "No Data" 
     } 
    }, 
    columns: [ 
     ['x', '{$dateArray}'], 
     ['Attack', {$data}], 
    ],colors: { 
     Attack: '#67b7dc', 
    }, 
    types: { 
     Attack: 'area' 
    }}; 
var chart = c3.generate({bindto: '#chart1', 
size: { 
    height: 630, 
}, 
data: data, 
grid: { 
    x: { 
     show: true 
    }, 
    y: { 
     show: true 
    } 
}, 
tooltip: { 
    format: { 
     value: function (value, ratio, id) { 
      var format = value+' Gbps [ IP: '+destIp[value]+' ]'; 
      return format;    
     } 
    } 
}, 
zoom: { 
    enabled: true 
}, 
subchart: { 
    show: true 
},axis: { 
    x: { 
     type: 'timeseries', 
     tick: { 
      format: '%b %d, %H:%M', 
      rotate: 90, 
      multiline: false 
     } 
    }, 
    y: { 
     tick: { 
      format: function (d) { 
       return d.toFixed(3); 
      } 
     }, 
     label: { 
      text: 'Attack Size (Gbps)', 
      position: 'outer-middle' 
     } 
    } 
} 
}); 

回答

2

使用c3.js图表配置tick.count,将其设置为所需的整数值,如2,3或4.

使用c3.js Timeseries Chart exmaple可以使用此配置。

问题,而tick.count: - enter image description here

问题与tick.count配置解决: - enter image description here

+0

感谢名单@Chetan它解决了这个问题 –