图表中的散点图 - 如何使用 4 个象限？

如何解决图表中的散点图 - 如何使用 4 个象限？

我正在使用 Recharts 在 react 中绘制数据。

我希望能够在绘图过程中看到所有四个笛卡尔象限。我目前正在使用此代码，

import React,{ PureComponent } from 'react';
import { ScatterChart,Scatter,XAxis,YAxis,Cartesiangrid,Tooltip,Cell,ResponsiveContainer } from 'recharts';
import { scaleOrdinal } from 'd3-scale';
import { schemeCategory10 } from 'd3-scale-chromatic';

const colors = scaleOrdinal(schemeCategory10).range();

const data = [
  { x: -100,y: 200,z: 200 },{ x: -120,y: 100,z: 260 },{ x: -170,y: 300,z: 400 },{ x: 140,y: 250,z: 280 },{ x: 150,y: 400,z: 500 },{ x: 110,y: 280,];

export default class Baseline extends PureComponent {
  static demoUrl = 'https://codesandBox.io/s/scatter-chart-with-cells-2sk2o';

  render() {
    return (
      <ResponsiveContainer width="100%" height="100%">
        <ScatterChart
          width={400}
          height={400}
          margin={{
            top: 20,right: 20,bottom: 20,left: 20,}}
        >
          <Cartesiangrid />
          <XAxis type="number" dataKey="x" name="stature" unit="cm" />
          <YAxis type="number" dataKey="y" name="weight" unit="kg" />
          <Tooltip cursor={{ strokeDasharray: '3 3' }} />
          <Scatter name="A school" data={data} fill="#8884d8">
            {data.map((entry,index) => (
              <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
            ))}
          </Scatter>
        </ScatterChart>
      </ResponsiveContainer>
    );
  }
}

我的目标是近似于此，

recharts 是最好的主意还是可以用它？喜欢任何例子:)

解决方法

您只需添加 ReferenceLine 即可将图表分成 4 个象限。

工作Codesandbox

import "./styles.css";
import React from "react";
import {
  ScatterChart,Scatter,XAxis,YAxis,CartesianGrid,Tooltip,ReferenceLine,Cell
} from "recharts";

const data = [
  { x: -100,y: -200,z: 200 },{ x: -100,y: 200,{ x: 120,y: 100,z: 260 },y: -100,{ x: 170,y: 300,z: 400 },{ x: -140,y: -250,z: 280 },y: 250,{ x: 150,y: 400,z: 500 },{ x: 110,y: 280,y: -280,z: 200 }
];

const COLORS = ["#0088FE","#00C49F","#FFBB28","#FF8042","red","pink"];

export default function App() {
  return (
    <ScatterChart
      width={500}
      height={400}
      margin={{
        top: 20,right: 20,bottom: 20,left: 20
      }}
    >
      <CartesianGrid />
      <XAxis type="number" dataKey="x" name="stature" unit="cm" />
      <YAxis type="number" dataKey="y" name="weight" unit="kg" />
      <Tooltip cursor={{ strokeDasharray: "3 3" }} />
      <Scatter name="A school" data={data} fill="#8884d8">
        {data.map((entry,index) => (
          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
        ))}
      </Scatter>
      <Tooltip cursor={{ strokeDasharray: "3 3" }} />
      <ReferenceLine y={0} stroke="#000000" />
      <ReferenceLine x={0} stroke="#000000" />
      <ReferenceLine
        segment={[
          {
            x: 0,y: 0
          },{
            x: 0,y: 0
          }
        ]}
        label={{
          value: "(0,0)",position: "bottom"
        }}
      />
    </ScatterChart>
  );
}

编辑：

您可以使用 segment 将标签放在不同的象限中。

 <ReferenceLine
      segment={[
          {
            x: 85,y: 200
          },{
            x: 85,y: 200
          }
        ]}
        label={{
          value: "high speed high accuracy",position: "insideBottom",stroke:"#DE3163"
        }}/>
        <ReferenceLine
      segment={[
          {
            x: -85,{
            x: -85,y: 200
          }
        ]}
        label={{
          value: "low speed high accuracy",stroke:"#DE3163"
        }}/>
        <ReferenceLine
      segment={[
          {
            x: 85,y: -200
          },y: -200
          }
        ]}
        label={{
          value: "high speed low accuracy",y: -200
          }
        ]}
        label={{
          value: "low speed low accuracy",stroke:"#DE3163"
        }}/>