C3图形重叠x轴标签答案

【问题标题】：C3 graph overlapping x-axis labelC3图形重叠x轴标签
【发布时间】：2016-08-01 11:29:12
【问题描述】：

C3 图形与日期时间格式的 x 轴标签重叠。我已经用谷歌搜索了这个查询，但没有得到任何解决方案。c3 是否可能只显示几个日期时间而不是完全显示导致 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'
        }
    }
}
});

【问题讨论】：

标签： javascript c3.js

【解决方案1】：

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

使用c3.js Timeseries Chart exmaple 来玩这个配置。

没有tick.count的问题：-

问题已通过 tick.count 配置解决：-

【讨论】：