Nivo Line Formatting 时间刻度在 x 轴上

Question

我想随时间格式化折线图的 x 轴我正在使用@nivo/line react 库进行图表

 axisBottom={{
   tickValues: 3,
   tickRotation: 90,
   format: (values) => `${getRequiredDateFormat(values, 'MMMM-DD')}`, // using momentjs to format   
   legendOffset: -80,
   legendPosition: 'start',
}}

只是想根据数据显示每个月出现一次。

CodeSandbox 链接 在这里试试

Answer 1

您可以创建一个包含所有 x 轴日期的新数组，如果日期出现多次，则显示一次。

这是一个工作示例 -

https://codesandbox.io/s/quirky-leftpad-dwmb9?file=/src/App.js&fbclid=IwAR1dZoKls-dVowdVRoN3pZd8INsHgc2egNdcNLkj3n0nDqMpJQIJdK6vyQ8