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

Question

问题：当数据包含可变数量的日期时，如何将 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 }

代码框：https : //codesandbox.io/s/dreamy-almeida-x7rnd?fontsize=14&hidenavigation=1&theme=dark

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

到目前为止我所做的是查看文档，我尝试将type: "time"格式添加到xscale，但出现错误

v.getTime() 不是函数。

Answer 1

您必须添加format到两个ResponsiveLine组件和xScale财产才能使用的时间尺度

格式：

x 值的可选格式化程序。

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

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

完整配置：（工作演示）

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>
  );
}