如何按升序对 X 轴上的 Rechart 中的值进行排序

Question

我有 3 个演示数据集可以使用 Recharts.js 在 React 中可视化。

{ x: 80, y: 50, name: "Page A" },
{ x: 14, y: 80, name: "Page B" },
{ x: 70, y: 38, name: "Page C" },

遗憾的是，x 轴上的值排序不正确 (80 -> 14 -> 70)，而是按照数据数组中对象的顺序排列。

const rechart = () => {
  return (
    <div>
      <ScatterChart width={400} height={400} data={data}>
        <XAxis dataKey="x" domain={[0, 100]} />
        <YAxis dataKey="y" domain={[0, 100]} axisLine={false} tick={false} />
        <Scatter data={data}>
          <LabelList dataKey="name" position="right" />
        </Scatter>
      </ScatterChart>
    </div>
  );
};

如何对 0 到 100 的值进行排序，而不是将页面 A 排序到页面 C？

Answer 1

在将数据作为 props 传递给 Scatter 组件之前尝试对数据进行排序

data.sort((a,b) => a.x - b.x)

const rechart = () => {
  const sortedData = data.sort((a,b) => a.x - b.x)
  return (
    <div>
      <ScatterChart width={400} height={400} data={data}>
        <XAxis dataKey="x" domain={[0, 100]} />
        <YAxis dataKey="y" domain={[0, 100]} axisLine={false} tick={false} />
        <Scatter data={sortedData}>
          <LabelList dataKey="name" position="right" />
        </Scatter>
      </ScatterChart>
    </div>
  );
};

如何按升序对 X 轴上的 Rechart 中的值进行排序

How to sort values in Rechart on x-axis in ascending order

reactjs

recharts