C3 图表 - 如何将 X 轴的 DateTime 间隔设置为 1 周？答案

【问题标题】：C3 chart - How to set X-Axis a DateTime interval 1 week?C3 图表 - 如何将 X 轴的 DateTime 间隔设置为 1 周？
【发布时间】：2022-07-28 14:18:05
【问题描述】：

我对使用 c3 构建图表非常陌生。我已经进行了搜索，但找不到答案。有人可以帮忙吗？

如果我的日期从 2022 年 1 月 1 日开始并以 2022 年 4 月 1 日结束，那么我如何强制在 X 轴中设置 1 周的 DateTime 间隔，那么它必须以 2022 年 1 月 1 日开始并且然后是 2022 年 1 月 7 日、2022 年 1 月 14 日、2022 年 1 月 21 日等等......

var chart = c3.generate({
data: {
    x: 'x',
    columns: [
        ['x', '2022-01-01', '2022-01-07', '2022-01-14', '2022-01-21', '2022-01-28', '2022-02-04', '2022-02-11', '2022-02-18', '2022-02-25'],
        ['data1', 30, 200, 100, 400, 150, 250, 300, 350, 320]
        
    ]
},
axis: {
    x: {
        type: 'timeseries',
        tick: {
            format: '%Y-%m-%d'
        }
    }
}});

上面，我给出了一个示例。这里开始日期是 01-01-2022，结束日期是 25-02-2022。那么我怎样才能通过最小范围是 01-01-2022 和最大范围是 25-02-2022 间隔 1 周

【问题讨论】：

标签： charts time-series c3.js cumulative-line-chart

【解决方案1】：

c3.js 将默认为提供的数据范围，但您可以设置x axis tick values separately from the data。编辑你的代码，这里是一个例子：

var chart = c3.generate({
data: {
    x: 'x',
    columns: [
        ['x', '2022-01-01', '2022-01-07', '2022-01-14', '2022-01-21', '2022-01-28', '2022-02-04', '2022-02-11', '2022-02-18', '2022-02-25'],
        ['data1', 30, 200, 100, 400, 150, 250, 300, 350, 320]
        
    ]
},
axis: {
    x: {
        type: 'timeseries',
        tick: {
            format: '%Y-%m-%d',
            values: ['2022-01-01', '2022-01-07', '2022-01-14', '2022-01-21', '2022-01-28', '2022-02-04', '2022-02-11', '2022-02-18', '2022-02-25'],
            rotate: -30
        }
    }
}});

【讨论】：