javascript - Nivo 条形图轴标签重叠

Question

我正在使用 @nivo/bar: "0.63.1"生成一个以“YYYYMMDD”格式接收日期的图表。当图表变大时，如何通过每 7 天或每 30 天等显示一次来防止 x 轴标签重叠？我尝试添加tickValues，但它没有执行任何操作。

        axisBottom={{
            tickValues: 7,
            format: function (value) {
                return moment(value).format('DD');
            },
        }}

Answer 1

一种解决方法是创建一个函数，如果日期不是星期一，则返回一个空字符串:

const isMonday = value => moment(value).day() === 1;

axisBottom={{
    format: function (value) {
        return isMonday(value) ? moment(value).format('DD') : "";
    },
    tickSize: function (value) {
        return isMonday(value) ? 5 : 0;
    },
}}