ReactJS/Nivo图形-当数据包含“时，如何将x轴修改为升序日期顺序”；“不完整”；数据？

问题：当数据中包含可变数量的日期时，如何将x轴“重新格式化”为升序日期

我有一些数据包含与之相关的可变数量的“日期”。例如，第一行包含：

{ x: "2019-05-01", y: 2 },
{ x: "2019-06-01", y: 7 },
{ x: "2020-03-01", y: 1 }

而第二行包含：

{ x: "2019-05-01", y: 1 },
{ x: "2019-06-01", y: 5 },
{ x: "2020-05-01", y: 5 }

代码框：

数据在x轴上是“不均匀的”，因此它看起来很奇怪。我意识到，如果我要输入“虚拟日期”和数据，那么我可以指定x轴成为我想要的格式，问题是虚拟日期+数据，因为它不能准确地建模我的数据库，所以我想避免类似的事情

到目前为止，我所做的是查看文档，我尝试将

类型：“time”

格式添加到

xscale

，但我遇到了错误

v.getTime（）

不是函数

---

为了使用时间刻度，您必须将

格式

添加到

响应行

组件和

xScale

属性中

xFormat：

x值的可选格式化程序

格式化后的值可用于标签和工具提示

如果使用时间刻度，则必须在值转换为日期对象时提供时间格式

完整配置：（）

从“React”导入React；
从“@nivo/line”导入{ResponsiveLine}；
导出默认函数App（）{
返回(
)
);
}

---

修改了以下内容并使用随机（无排序数据）进行测试

• xscale类型以时间为单位，格式为

• 将indexBy=“date”属性添加到responsiveline元素

• 将格式：“%Y-%m-%d”添加到轴底部
  您可以在这里找到一个工作示例

导出默认函数App（）
{返回(
)
);
}

很好的例子，谢谢！我有个问题。如何确定显示在负1天的日期？在您的例子中，一号线和二号线从2019-04-30开始，而不是2019-05-01？

import React from "react";
import { ResponsiveLine } from "@nivo/line";

export default function App() {
  return (
    <div style={{ height: 350 }} className="App">
      <ResponsiveLine
        data={[
          {
            id: "LineOne",
            data: [
              { x: "2019-05-01", y: 2 },
              { x: "2019-06-01", y: 7 },
              { x: "2020-03-01", y: 1 }
            ]
          },
          {
            id: "LineTwo",
            data: [
              { x: "2019-05-01", y: 1 },
              { x: "2019-06-01", y: 5 },
              { x: "2020-05-01", y: 5 }
            ]
          },
          {
            id: "LineThree",
            data: [
              { x: "2020-02-01", y: 4 },
              { x: "2020-03-01", y: 6 },
              { x: "2020-04-01", y: 1 }
            ]
          }
        ]}
        margin={{ top: 50, right: 110, bottom: 50, 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
        }}
        axisTop={null}
        axisRight={null}
        axisLeft={{
          orient: "left",
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 0,
          legend: "count",
          legendOffset: -40,
          legendPosition: "middle"
        }}
        axisBottom={{
          format: "%b %d",
          //tickValues: "every 2 days",
          // tickRotation: -90,
          legend: "time scale",
          legendOffset: -12
        }}
        colors={{ scheme: "nivo" }}
        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
                }
              }
            ]
          }
        ]}
      />
      )
    </div>
  );
}

export default function App()
 { return (
 <div style={{ height: 350 }} className="App">

          <ResponsiveLine
    
                data={[
                  {
                    id: "LineOne",
                    data: [
                      { x: "2019-05-01", y: 2 },
                      { x: "2019-06-01", y: 7 },
                      { x: "2020-03-01", y: 1 },
                      { x: "2017-09-01", y: 6 }
                    ]
                  },
                  {
                    id: "LineTwo",
                    data: [
                      { x: "2019-05-01", y: 1 },
                      { x: "2019-06-01", y: 5 },
                      { x: "2020-05-01", y: 5 },
                      { x: "2018-09-01", y: 3 }
                    ]
                  },
                  {
                    id: "LineThree",
                    data: [
                      { x: "2020-02-01", y: 4 },
                      { x: "2020-03-01", y: 6 },
                      { x: "2020-04-01", y: 1 }
                    ]
                  }
                ]}
                indexBy="date"
                margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
                xScale={{
                  type: "time",
                  format: "%Y-%m-%d",
                  precision: "day"
                }}
                yScale={{ type: "linear", stacked: false, min: 0, max: "auto" }}
                axisTop={null}
                axisRight={null}
                axisBottom={{
                  orient: "bottom",
                  tickSize: 5,
                  format: "%Y-%m-%d",
                  tickPadding: 5,
                  tickRotation: -65,
                  legend: "time",
                  legendOffset: 40,
                  legendPosition: "middle"
                }}
                axisLeft={{
                  orient: "left",
                  tickSize: 5,
                  tickPadding: 5,
                  tickRotation: 0,
                  legend: "count",
                  legendOffset: -40,
                  legendPosition: "middle"
                }}
                colors={{ scheme: "nivo" }}
                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
                        }
                      }
                    ]
                  }
                ]}
              />
              )
            </div>
          );
        }