VChart icon indicating copy to clipboard operation
VChart copied to clipboard

[Bug] The result of calling showTooltip to display the mark tooltip is incorrect.

Open xiaoluoHe opened this issue 5 months ago • 0 comments

Version

1.x

Link to Minimal Reproduction

none

Steps to Reproduce

const getData = () =>
  ['2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00'].map(time => ({
    time,
    value: Math.random() * 10
  }));

const getData2 = () => {
   const dataA = ['2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00'].map(time => ({
    time,
    value: Math.random() * 10,
    type:'A'
  }));
  const dataB = ['2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00'].map(time => ({
    time,
    value: Math.random() * 10,
    type:'B'
  }));
  return [...dataA, ...dataB]

}


const getLineSpec = () => ({
  type: 'line',
  data: {
    values: getData2()
  },
  seriesField:'type',
  xField: 'time',
  yField: 'value',
  crosshair: {
    xField: {
      label: {
        visible: true
      }
    }
  }
});

const getBarSpec = () => ({
  type: 'line',
  data: {
    values: getData2()
  },
  xField: "time",
  yField: 'value',
  seriesField:'type',
  stack:false,
  crosshair: {
    xField: {
      label: {
        visible: true
      }
    }
  }
});

const root = document.getElementById(CONTAINER_ID);
const { VChart, VChartCore } = ReactVChart;
VChartCore.globalConfig.uniqueTooltip = false;
const { useState, useRef, useEffect, useCallback } = React;

const Card = () => {
  const [lineSpec, setLineSpec] = useState(getLineSpec());
  const [barSpec, setBarSpec] = useState(getBarSpec());
  const lineChartRef = useRef(null);
  const barChartRef = useRef(null);

  useEffect(() => {
    window['vchart'] = lineChartRef.current;
  }, []);

  const handleSwitchData = () => {
    setLineSpec(getLineSpec());
    setBarSpec(getBarSpec());
  };

  const handleLineChartDimensionHover = useCallback(params => {
    if (!barChartRef.current) {
      return;
    }

    const dimensionValue = params.dimensionInfo && params.dimensionInfo[0] && params.dimensionInfo[0].value;
    const tooltipType = params.mark && params.mark.name === 'point' ? 'mark' : 'dimension';
    if (dimensionValue != null && params.action !== 'leave') {
     if(tooltipType === 'mark') {
      barChartRef.current.setDimensionIndex(dimensionValue, { tooltip: false, });
      console.log(params.dimensionInfo)
      const linePointData = params.datum;
      console.log(linePointData)
      debugger
      barChartRef.current.showTooltip({
        time: dimensionValue,
        type: linePointData.type
      }, { activeType: 'mark'})
    }else{
      barChartRef.current.setDimensionIndex(dimensionValue, { tooltip: true });
    }
    } else {
      barChartRef.current.setDimensionIndex(null, { tooltip: false });
       barChartRef.current.hideTooltip()
    }
  }, []);
  const handleBarChartDimensionHover = useCallback(params => {
    if (!lineChartRef.current) {
      return;
    }
    const dimensionValue = params.dimensionInfo && params.dimensionInfo[0] && params.dimensionInfo[0].value;

    if (dimensionValue != null && params.action !== 'leave') {
      lineChartRef.current.setDimensionIndex(dimensionValue, { tooltip: false });
    } else {
      lineChartRef.current.setDimensionIndex(null, { tooltip: false });
    }
  }, []);

  return (
    <div className="chart-containers">
      <div className="inner-container" style={{ display: 'flex' }}>
        <div style={{ flex: 1 }}>
          <VChart ref={lineChartRef} spec={lineSpec} onDimensionHover={handleLineChartDimensionHover} />
        </div>
        <div style={{ flex: 1 }}>
          <VChart ref={barChartRef} spec={barSpec} onDimensionHover={handleBarChartDimensionHover} />
        </div>
      </div>
      <button
        style={{ position: 'absolute', top: 0, left: '50%', transform: 'translate(-50%, 0)' }}
        onClick={handleSwitchData}
      >
        Switch Data
      </button>
    </div>
  );
};

ReactDom.createRoot(root).render(<Card />);

// release react instance, do not copy
window.customRelease = () => {
  ReactDom.unmountComponentAtNode(root);
};

Current Behavior

Image

Expected Behavior

tooltip 内的数值正常显示

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

xiaoluoHe avatar Jul 11 '25 02:07 xiaoluoHe