Блог

Мои диаграммы будут насыщены данными, а имя метки (в коде ниже) должно быть смещено от пузырька (см. Рисунок)

Как я могу добиться этого в rechart (react)

 export default function NickelResourceChart({data}) {
  const data01 = [
    {x: 47.9, y: 1.08, z: 47.9, labelName: 'Jaguar'},
    {x: 58.0, y: 0.48, z: 58.0, labelName: 'Ban phuc'},
    {x: 8.7, y: 1.63, z: 8.7, labelName: 'Mt edwards'},
    {x: 6.8, y: 0.42, z: 6.8, labelName: 'Idaho'},
  ]

  return (
    <ScatterChart width={400} height={400}>
      {console.log('chart data', data)}
      <XAxis type="number" dataKey={'x'} name="Size" unit="Mt" padding={{left: 10, right: 10}} />
      <YAxis type="number" dataKey={'y'} name="Grade" unit="Ni%" padding={{top: 10, bottom: 10}} />
      <ZAxis dataKey={'x'} range={[5, 1000]} unit="Mt" />
      <CartesianGrid />
      <Tooltip cursor={{strokeDasharray: '10 10'}} />
      <Scatter data={data01} fill="#ff6600" shape="circle">
        <LabelList
          dataKey="labelName"
          fill="rgb(255, 102, 0);"
          position="bottom"
          StackOffsetType="sign"
          fontSize={'70%'}
        ></LabelList>
      </Scatter>
    </ScatterChart>
  )
}
 

Попробуйте установить position=»insideTopLeft» и offset={-50} внутри LabelList . Попробуйте настроить эти цифры в соответствии с вашими потребностями. Это указано в документах: https://recharts.org/en-US/api/LabelList#offset