React Recharts -› Проблем с подсказка с LabelList в Scatter диаграма

От известно време се сблъскваме с проблем с LabelList, който се показва върху елементите на точковата диаграма. Ако потребителят задържи курсора на мишката над тях, подсказката не се показва.

Код:

const {ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, LabelList, Tooltip, Legend} = 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}]

const SimpleScatterChart = React.createClass({
    render () {
    return (
        <ScatterChart width={400} height={400} margin={{top: 20, right: 20, bottom: 20, left: 20}}>
        <XAxis type="number" dataKey={'x'} name='stature' unit='cm'/>
        <YAxis type="number" dataKey={'y'} name='weight' unit='kg'/>
        <CartesianGrid />
        <Tooltip cursor={{strokeDasharray: '3 3'}}/>
        <Legend onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} />
        <Scatter name='A school' data={data} fill='#8884d8'>
          <LabelList dataKey="x" />
        </Scatter>
      </ScatterChart>
    );
  }
})

ReactDOM.render(
  <SimpleScatterChart />,
  document.getElementById('container')
);

Пример: https://jsfiddle.net/alidingling/gvsspn0h/

След като премахнете LabelList, той работи добре:

const {ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, LabelList, Tooltip, Legend} = 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}]

const SimpleScatterChart = React.createClass({
    render () {
    return (
        <ScatterChart width={400} height={400} margin={{top: 20, right: 20, bottom: 20, left: 20}}>
        <XAxis type="number" dataKey={'x'} name='stature' unit='cm'/>
        <YAxis type="number" dataKey={'y'} name='weight' unit='kg'/>
        <CartesianGrid />
        <Tooltip cursor={{strokeDasharray: '3 3'}}/>
        <Legend onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} />
        <Scatter name='A school' data={data} fill='#8884d8'>
        </Scatter>
      </ScatterChart>
    );
  }
})

ReactDOM.render(
  <SimpleScatterChart />,
  document.getElementById('container')
);

Пример: https://jsfiddle.net/gt0uy92a/2/

Проблемът е, че трябва да се покаже LabelList, както е в първия пример, не можем да променим позицията, но подсказката трябва да работи правилно.


reactjs recharts tooltip scatter-plot
person Anton Smatanik    schedule 24.01.2020    source източник

Отговори (2)


arrow_upward
2
arrow_downward 

<LabelList 
  dataKey="x" 
  style={{pointerEvents: 'none'}}
/>

ще работи за вас. можете също да свържете събитието onMouseEnter към компонента LabelList.

person Martin Fric    schedule 28.01.2020

arrow_upward
0
arrow_downward

Решението не беше толкова просто, беше малко сложно, но все пак логично. Ако не можем да направим нищо по начина, по който се изобразяват SVG елементите, не можем да използваме z-index, пак можем да им зададем непрозрачност.

const CustomizedCircle = props => {
    const {
        cx, cy, fill, size, z,
    } = props;
    const radius = size / 70;
    const value = z;

    return (
        <svg width={radius} height={radius} style={{overflow: 'visible'}}>
            <text style={{fontWeight: FONT_WEIGHT, fontSize: FONT_SIZE}} x={cx} y={cy + 5} textAnchor="middle">{value}</text>
            <circle style={{opacity: OPACITY}} cx={cx} cy={cy} r={radius} fill={fill} />
        </svg>
    );
};

Така че първо изобразяваме текста, след това изобразяваме кръга и за да видим текст под кръга, задаваме на кръга някакъв вид непрозрачност.

person Anton Smatanik    schedule 28.01.2020