在两个轴上动态显示刻度（值），并在中心对齐

Question

我想在 x 和 y 轴上显示刻度，并在图形中心对齐（以正确显示 4 个象限。我正在使用 React recharts 库。 目前我使用参考线来显示 4 个象限，并且 x 轴和 y 轴是分开的。 如何显示刻度和值？ 请注意，数据是从后端动态渲染的，因此轴也可以具有负 x 值和负 y 值。

import React, { useEffect } from 'react';
import {
  LineChart,
  XAxis,
  YAxis,
  Line,
  Tooltip,
  ReferenceLine,
} from 'recharts';

const Chart = ({ chartData }) => {

  useEffect(() => {
    console.log(chartData);

    return () => {

    }
  }, []);

  const gradientOffset = () => {
    const dataMax = Math.max(...chartData.map((i) => i.uv));
    const dataMin = Math.min(...chartData.map((i) => i.uv));

    if (dataMax <= 0) {
      return 0;
    }
    if (dataMin >= 0) {
      return 1;
    }

    return dataMax / (dataMax - dataMin);
  };

  const off = gradientOffset();

  return (
    <>
      <LineChart
        width={1000}
        height={500}
        data={chartData}
        margin={{
          top: 10,
          right: 30,
          left: 30,
          bottom: 10,
        }}
      >

        <defs>
          <linearGradient id="colorUv" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="50%" stopColor="green" />
            {/* <stop offset="50%" stopColor="green" /> */}
            {/* <stop offset="50%" stopColor="black" /> */}
            {/* <stop offset="50%" stopColor="red" /> */}
            <stop offset="100%" stopColor="red" />
          </linearGradient>
        </defs>

        <XAxis
          dataKey="x"
          domain={['auto', 'auto']}
          interval={0}
          type="number"
        />


        <ReferenceLine y={0} stroke='white' strokeDasharray='none' />

        <ReferenceLine x={0} stroke='white' strokeDasharray='none' />

        <YAxis
          dataKey="y"
          domain={['auto', 'auto']}
          type="number"
          interval={0}
          label={{
            style: { textAnchor: 'middle' },
            position: 'left',
            offset: 0,
          }}
        />

        {chartData.length >= 1 &&
          <Line
            type='monotone'
            dataKey='y'
            stroke='url(#colorUv)'
            strokeWidth={2}
          />}

        <Tooltip
          content={(dataItem) => {
            if (dataItem.payload && dataItem.payload.length > 0) {
              const xValue = dataItem.payload[0].payload.x;
              const yValue = dataItem.payload[0].payload.y;

              const color = yValue < 0 ? 'red' : 'green';

              return (
                <div
                  style={{
                    background: color,
                    color: 'black',
                    border: '1px solid #ccc',
                    borderRadius: '5px',
                    boxShadow: '2px 2px 5px rgba(0, 0, 0, 0.1)',
                    padding: '10px',
                  }}
                >
                  <p style={{ fontWeight: 'bold', marginBottom: '5px' }}>X: {xValue}</p>
                  <p style={{ fontWeight: 'bold', marginBottom: '5px' }}>Y: {yValue}</p>
                </div>
              );
            }
            return null;
          }}
        />
      </LineChart>
    </>
  );
};

export default Chart;

Answer 1

您可以使用“刻度”和“标签”组件在 x 轴和 y 轴上显示刻度和值：

<XAxis 
  dataKey="x"
  interval={50} >
    <XAxis.Tick />
    <XAxis.Label value="X Value" offset={0} position="insideBottom" />
</XAxis>

<YAxis
  dataKey="y"
  interval={50} >
  <YAxis.Tick />
  <YAxis.Label value="Y Value" offset={0} position="insideLeft" />  
</YAxis>

一些要点：

1. 使用 Interval 属性来控制显示刻度线的频率
2. 渲染 和 以显示刻度线
3. 渲染 和 以显示值
4. 使用offset和position来控制标签定位

对于两个轴上的负值，将域设置为 ['auto', 'auto'] 就像你所做的那样。

请告诉我这是否有助于解释如何添加刻度/值！ Recharts Tick 和 Label 组件为您提供了对轴样式的大量控制。