1

我目前正在做一个项目，该项目需要我使用一个气泡图，其中可以同时选择多个气泡项目。用户可以通过绘制选取框（边界框）来执行选择，就像 oracle OJ 图表功能一样。但由于 Oracle 图表位于 Jet 框架上，我无法将它无缝地用作我的 React 项目中的组件。

OJ 图表选框选择

来源链接：http ://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=bubbleChart&demo=selection

    import React, { Component } from 'react';
import { ScatterChart, Scatter, LabelList, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

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, z: 200}
];

class RechartBubble extends Component {
  render(){
    return(
      <div>
      <ScatterChart width={400} height={400} margin={{top: 20, right: 20, bottom: 20, left: 20}}>
        <CartesianGrid />
          <XAxis dataKey={'x'} type="number" name='stature' unit='cm'/>
          <YAxis dataKey={'y'} type="number" name='weight' unit='kg'/>
          <Tooltip cursor={{strokeDasharray: '3 3'}}/>
          <Legend/>
          <Scatter name='A school' data={data} fill='#8884d8'/>
             <LabelList dataKey="x" position="center"/>
      </ScatterChart>

      </div>
    );
  }

我真的很感激这个方向的任何指示。任何帮助是极大的赞赏！！

谢谢。

4

0 回答 0