如何配置C3.js时间序列X轴，每6小时显示标签且从00:00开始？

针对你遇到的X轴时间标签显示问题，我调整了代码中的X轴配置，主要通过控制tick的间隔和格式来实现需求，具体修改点和完整代码如下：

关键修改说明 #

• 移除了axis.x.extent配置：这个参数会强制限制X轴的显示范围，可能导致时间标签无法按预期展示
• 优化tick配置：
  • 使用interval: d3.time.hour.every(6)明确指定每6小时一个刻度
  • 调整format为"%H:00\n%a"：%H是24小时制格式，确保能显示00:00这类时间，%a显示星期缩写
  • 添加fit: true：让C3自动适配刻度位置，保证起始刻度从00:00开始

修改后的完整代码 #

var chart = c3.generate({
    bindto: '#chart',
    size: { height: 320, width: 1100 },
    data: {
        x: 'date',
        x_format: '%Y-%m-%d %H:%M:%S',
        json: result,
        keys: { x: 'created_at', value: ['AQI'] },
        type: 'bar'
    },
    bar: { width: { ratio: 1 } },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: "%H:00\n%a",
                interval: d3.time.hour.every(6),
                fit: true
            },
            label: 'Time'
        }
    }
});

如果你的数据时间范围跨多天，这个配置会自动在每天的00:00、06:00、12:00、18:00生成标签，完全符合你的需求。

内容的提问来源于stack exchange，提问作者tuanct