Блог

Я пытаюсь реализовать линейный график с помощью библиотеки 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,
          },
        },
      ],
    },
  ]}
/>
 

И как он отображается (первый элемент 28 февраля), это что-то с форматом даты (в конце я поместил скриншот того, как он отображается):

Хорошо, я наконец нашел решение (useUTC, точность) с помощью этого сборника рассказов: https://nivo.rocks/storybook/?path=/story/line—time-scale

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