reactjs - 在 Nivo 折线图中显示日期从第 1 天开始

Question

我尝试使用 Nivo 库实现折线图。

我想显示的只是按天提交的数组。我的数组看起来像：

const data = [
{
  id: 'Submission',
  color: 'hsl(213, 70%, 50%)',
  data: [
    {
      x: '2021-03-01',
      y: 24,
    },
    {
      x: '2021-03-02',
      y: 31,
    },
    ...

我如何配置图表：

<ResponsiveLine
  data={data}
  margin={{ top: 0, right: 110, bottom: 70, left: 60 }}
  xScale={{
    type: 'time',
    format: '%Y-%m-%d',
  }}
  xFormat="time:%Y-%m-%d"
  yScale={{
    type: 'linear',
    min: 'auto',
    max: 'auto',
    stacked: false,
    reverse: false,
  }}
  curve="monotoneX"
  axisTop={null}
  axisRight={null}
  axisLeft={{
    orient: 'left',
    tickSize: 5,
    tickPadding: 5,
    tickRotation: 0,
    legend: 'Submission',
    legendOffset: -40,
    legendPosition: 'middle',
  }}
  axisBottom={{
    format: '%b %d',
    // tickRotation: -90,
    legend: 'Day',
    legendOffset: 40,
    legendPosition: 'middle',
  }}
  colors={{ scheme: 'spectral' }}
  pointSize={10}
  pointColor={{ theme: 'background' }}
  pointBorderWidth={2}
  pointBorderColor={{ from: 'serieColor' }}
  pointLabel="y"
  pointLabelYOffset={-12}
  useMesh={true}
  legends={[
    {
      anchor: 'bottom-right',
      direction: 'column',
      justify: false,
      translateX: 100,
      translateY: 0,
      itemsSpacing: 0,
      itemDirection: 'left-to-right',
      itemWidth: 80,
      itemHeight: 20,
      itemOpacity: 0.75,
      symbolSize: 12,
      symbolShape: 'circle',
      symbolBorderColor: 'rgba(0, 0, 0, .5)',
      effects: [
        {
          on: 'hover',
          style: {
            itemBackground: 'rgba(0, 0, 0, .03)',
            itemOpacity: 1,
          },
        },
      ],
    },
  ]}
/>

它渲染（第一个元素是在 2 月 28 日），它是否具有日期格式（最后，我放了它如何渲染的屏幕截图）：

Answer 1

好的，我终于找到了这个故事书的解决方案（useUTC，precision）：https ://nivo.rocks/storybook/?path=/story/line--time-scale

...
xScale={{
    type: 'time',
    format: '%Y-%m-%d',
    useUTC: false,
    precision: 'day',
}}
...