web-dev-qa-db-ja.com

ツールチップ（リチャート）でホバーされた線のみを表示できる方法はありますか？

カスタマイズされたツールチップを使用してみましたが、ホバーされたペイロードのインデックスを取得する方法がわからないという問題がありました。私が欲しいのは、ツールチップにホバーされた線の値だけを表示することです。たとえば、値1の行にカーソルを合わせたので、ツールチップに値1のみを表示したいとします。

これが画像です

enter image description here

カスタマイズされたツールチップを削除しましたが、これが私のコードです。

    export default class LineChartPresentational extends React.Component {
      constructor(props) {
      super();
      this.state = {
          clickedLineid: '' }}


      changeStrokeclick(data) {
         console.log(data, 'see what is coming');
         this.setState({clickedLineID: data} ) }

      render() {
         return ( 
            <div>
            <div id="lclastdataref" style={{ textAlign: 'right' }}>
            <span>Last Data Refresh: {linechartdf.date} </span>
            </div>
            <div className='line-charts'>
            <div className="line-chart-wrapper " style={{ width: window.innerWidth / 2, height: window.innerHeight / 2, }}>

        <ResponsiveContainer>
          <LineChart
            width={width} height={height} margin={{ top: 20, right: 20, bottom: 20, left: 20 }} data={linechartdata} id="Line-Chart">
            <XAxis dataKey={xAxisColumn} />
            <YAxis domain={['auto', 'auto']} />
            <Tooltip cursor={false} />
            {
              linechartdata.map((entry, index) => (
                <Line stroke={index === this.state.clickedLineID ? "#2d75ed" : "#9da0a5"} onClick={this.changeStrokeclick.bind(this, index)} name={linechartdata[index].dataKey} strokeWidth={lineThickness} dataKey={`value${index + 1}`} dot={false} className={`value${index + 1}`}/>
              ))
            }
            </LineChart>

        </ResponsiveContainer>
      </div>
    </div>
  </div> ); }}

本当にあなたの助けが必要です。ありがとう！

javascriptcssreactjsrecharts
4
Danielle Mae Tugare

カスタムツールチップは、これを行うためのオプションです。

<Tooltip content={this.customTooltipOnYourLine}/>

ここでcustomTooltipOnYourLineは、カスタムツールチップを返すメソッドです。

    customTooltipOnYourLine(e){
        if (e.active && e.payload!=null && e.payload[0]!=null) {
              return (<div className="custom-tooltip">
                    <p>{e.payload[0].payload["Column Name"]}</p>
                  </div>);
            }
        else{
           return "";
        }
      }

詳細については、このリンクを確認してください Recharts Tooltip

編集

この答えを確認してください

Answer2

5
Iniamudhan

以下のロジックを使用すると、ドットごとに個別のツールチップを実現できます。

デモリンク： カスタムツールチップを使用した折れ線グラフ

  1. デフォルトのツールチップを非表示

  2. Lineにマウスイベント機能を追加（ドットがアクティブな場合）

    <Line
      activeDot={{
        onMouseOver: this.showToolTip,
        onMouseLeave: this.hideToolTip
      }}
     ....
    />

  3. カスタムツールチップdiv

      <div className="ui-chart-tooltip" ref={ref => (this.tooltip = ref)} >
      <div className="ui-chart-tooltip-content" />
  </div>

  4. showToolTipおよびhideTooltip関数

         showToolTip = (e) => {
      let x = Math.round(e.cx);
      let y = Math.round(e.cy);
      this.tooltip.style.opacity = "1";
      this.tooltip.childNode[0].innerHTML = e.payload["value"];

      };

      hideTooltip = e => {
      this.tooltip.style.opacity = "0";
      };
0
Rajat Kanthaliya