1

例如，我有一个这样的示例图表

import {
  VictoryChart,
  VictoryGroup,
  VictoryLine,
  VictoryScatter,
  VictoryTheme
} from "victory";

export default function App() {
  return (
    <div>
      <VictoryChart>
        <VictoryGroup
          data={[
            { x: 1, y: 2 },
            { x: 1, y: 3 },
            { x: 3, y: 5 },
            { x: 4, y: 4 },
            { x: 5, y: 7 },
            { x: 6, y: 2 },
            { x: 7, y: 3 },
            { x: 8, y: 5 },
            { x: 9, y: 4 },
            { x: 10, y: 7 }
          ]}
          color="blue"
        >
          <VictoryLine
            style={{
              data: { stroke: "#c43a31" },
              parent: { border: "1px solid #ccc" }
            }}
          />
          <VictoryScatter size={6} symbol="star" />
        </VictoryGroup>
      </VictoryChart>
    </div>
  );
}

它像这样显示

问题是，我的 x 数据contain date and time，所以如果我转换为日期，它们将显示在同一点，如上图

在此处输入图像描述

例如，如果 x 是17/5/2021 11:11:11AM，另一个点是17/5/2021 12:11:11AM，当转换为日期时，它显示相同的点。我还想根据时间显示数据，我该怎么做，日期的格式是这样的

[
    "2021-05-17 14:32:27",
    "2021-05-21 09:33:44",
    "2021-05-26 09:05:47",
    "2021-05-30 00:00:00",
    "2021-06-04 10:27:53",
    "2021-06-08 11:03:06",
    "2021-06-12 07:25:37",
    "2021-06-16 12:28:03",
    "2021-06-21 12:44:47",
    "2021-06-24 10:03:24",
    "2021-06-28 08:22:59",
    "2021-07-02 11:08:46",
    "2021-07-09 14:28:26",
    "2021-07-20 00:00:00",
    "2021-07-31 00:00:00",
    "2021-08-11 00:00:00",
    "2021-08-22 00:00:00",
    "2021-09-02 00:00:00",
    "2021-09-13 00:00:00"
]

我希望它会显示这样的东西 在此处输入图像描述

如您所见，第 8 天和第 9 天之间有一点，我该怎么做，非常感谢，这是示例沙箱

https://codesandbox.io/s/charming-snow-yyc1h?file=/src/App.js:0-857

4

0 回答 0