x 轴上的 Nivo Line Formatting 时间刻度

Question

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

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

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

CodeSandbox Link 在这里试试

Answer 1

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

这是一个工作示例 -

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

x 轴上的 Nivo Line Formatting 时间刻度

Nivo Line Formatting time tick on the x axis

javascript

graph

axis-labels

d3.js

reactjs