2

这个问题是这里发布的问题的代码：Recharts tooltip with pointer (react,tooltip)。

原来的问题：

在试图用指针显示工具提示的折线图上，该指针显示虚线相应地指向 x 轴和 y 轴。问题是我可以单独使用它们，但不能一起使用，因为 onMouseMove 状态会干扰工具提示的显示。有解决方案吗？

图表.js

import React, { Component } from 'react';
import moment from 'moment';
import './Chart.css';

import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, ResponsiveContainer,Cross } from 'recharts';

class Chart extends Component {

constructor(props) {
    super(props);
    this.state = {
      chartX: 0,
      chartY: 0,
      hover:false
    };

    this.onMouseMoveHandler = this.onMouseMoveHandler.bind(this);
  }
  isOverMaxBitrate (data,ensemble) {
    return data.reduce((acc, d) => acc || d.bitrate > ensemble.get('maxBitrate'), false);
  }
onMouseMoveHandler(e) {
   // e.chartX, e.chartY
          //this.setState({hover: true});
       //   console.log("chartX " + e.chartX + "chartY" + e.chartY);
      // if(e.chartX.toString() !='undefined' && e.chartY.toString() !='undefined'){
       if( (Object.prototype.toString.call(e.chartX)!= Object.prototype.toString.call(undefined))&& (Object.prototype.toString.call(e.chartY)!= Object.prototype.toString.call(undefined)) ){
//      console.log (" DEFINED e.chartX " + e.chartX.toString() + " e.chartY" + e.chartY.toString())
          this.setState({ chartX: e.chartX , chartY: e.chartY, hover: true });
       }
       else{
          this.setState({  hover: false });
//          console.log ("Undefined e.chartX  e.chartY"  )
          }
         /* prevState => ({
                hover: !prevState.hover*/
      }

    onMouseEnterHandler() {
       // console.log('enter');
        this.setState({
            hover: true
        });
    }
    onMouseLeaveHandler() {
       // console.log('leave');
        this.setState({
            hover: false
        });
    }
  render() {
    const { ensemble, data, onClick ,startDay,endDay} = this.props;
        var dateBeforeMidnight = "";
        var dateAfterMidnight = "";
//console.log ("start " + startDay + "end " + endDay    )
var verticalLine;
var horizontalLine;
 if(this.state.hover) {
           verticalLine =  <line x1={this.state.chartX} y1={10} x2={this.state.chartX} y2={260}   stroke="green" strokeDasharray= '3 3' />;
           horizontalLine =  <line x1={60} y1={this.state.chartY} x2={850} y2={this.state.chartY}  strokeDasharray= '3 3' stroke="blue"   />;
        }else{
        verticalLine = null;
       horizontalLine = null;
        }

   // console.log(this.state);

    // startDay: { format(string) -> string }
    //
    return (
      <div className='Chart'  >
        <div className='Chart-bg' >
          <h3 className='Chart-title'>{ ensemble.get('description') }</h3>
          <ResponsiveContainer aspect={3} width='100%'    >
            <LineChart data={data} margin={{ top: 10, bottom: 10, left: 0, right: 50 }} onClick={onClick} onMouseMove={this.onMouseMoveHandler.bind(this)} onMouseEnter={this.onMouseEnterHandler.bind(this)}  onMouseLeave={this.onMouseLeaveHandler.bind(this)}  >

            {verticalLine}
            {horizontalLine}

              <CartesianGrid stroke='#ccc'  />
              <XAxis dataKey='time'  />
              <YAxis domain={['auto', 'auto']}/>
               <Tooltip />
              <ReferenceLine y={ensemble.get('maxBitrate', 0)} stroke='red' />
             <ReferenceLine x="00:00" stroke='red' label={moment(this.props.startDay).format("dddd MMMM D ")  +  '         ' +   '      ,    ' +     moment(this.props.endDay).format("dddd MMMM D ")}></ReferenceLine>

              <ReferenceLine x="12:00 am" stroke='red' label={moment(this.props.startDay).format("dddd MMMM D ")  +  '          ' +  '     ,     ' +       moment(this.props.endDay).format("dddd MMMM D ")} ></ReferenceLine>

              <Line type='monotone' dataKey='bitrate'  stroke={this.isOverMaxBitrate(data, ensemble) ? 'red' : 'blue'}/>

            </LineChart>
          </ResponsiveContainer>

        </div>

      </div>


    );
  }
}

export default Chart;

Chart.css
.Chart {
  border: 1px solid black;
  background-color: grey;
}

.Chart:not(:first-child) {
  margin-top: 10px;
}

.Chart-bg {
  background-color: white;
}

.Chart-title {
  margin: 0;
  padding-top: 5px;
}

.Chart .recharts-surface {
  cursor: pointer;


      padding: 10px;

}


.customizedTooltip{

 pointer-events: none;
 position:absolute;
 display:block;
 opacity:1;
 width:100%;
 placement: bottom;
 opacity:0.7;
 z-index:1000000;
 visibility:visible;


}


.wrapper {


  position: relative;
  pointer-events:auto;
  opacity:0.5;
  visibility:visible;






}

4

0 回答 0