C3图表-如何设置X轴日期时间间隔1周

Question

我对用c3构建图表非常陌生。我搜索了一下，但找不到答案。有人能帮忙吗？

我如何强制在X轴中设置DateTime间隔为1周，如果我的日期从2022年1月1日开始，到2022年4月1日结束，那么它必须从2022年01月开始，然后从2022年07月开始，2022年14月，2022年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'
}
}
}});

上面，我给出了一个示例。此处开始日期为2022年1月1日，结束日期为2022月25日。因此，我如何通过最小范围为2022年1月1日，最大范围为2022月25日，间隔1周的

Answer 1

c3.js将默认为所提供的数据范围，但您可以将x轴刻度值与数据分开设置。编辑你的代码，这里有一个例子：

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

Answer 2

根据我的理解，C3图表没有提供任何内置功能来更改X轴间隔。

这可以使用x轴的自定义逻辑来完成，我们必须自定义筛选功能，请参阅下面我想要两个日期之间的间隔7天，所以我必须自定义以下方式。

function maxCulling(total_days) {
const days = total_days;
const quotient = Math.trunc(days / 7);
return days % 7 === 0 ? quotient : quotient + 1;
}

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',
culling: { max: maxCulling(total_dates) },
rotate: -30
}
}
}});