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

问题描述

我尝试使用 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,}}
  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,.5)',effects: [
        {
          on: 'hover',style: {
            itemBackground: 'rgba(0,.03)',itemOpacity: 1,],]}
/>

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

解决方法

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

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