VChart icon indicating copy to clipboard operation
VChart copied to clipboard

[Bug] initial position for tooltip is incorrect in react-vchart

Open purpose233 opened this issue 4 months ago • 1 comments

Version

2.0.0

Link to Minimal Reproduction

null

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 getSpec = () => ({
  type: 'line',
  data: {
    values: getData()
  },
  xField: 'time',
  yField: 'value'
});

const root = document.getElementById(CONTAINER_ID);
const { VChart } = ReactVChart;
const { useState, useRef, useEffect } = React;

const Card = () => {
  const [spec, setSpec] = useState(getSpec());
  const chartRef = useRef(null);
  useEffect(() => {
    window['vchart'] = chartRef;
  }, []);

  const handleSwitchData = () => {
    setSpec(getSpec());
  };

  return (
    <div>
      <VChart ref={chartRef} spec={spec} tooltipRender={()=>{
        return <div>1111</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

Tooltip 的初始位置出现在左下角,第一次 hover 时会出现 tooltip 从左下角移动过来的情况。

Expected Behavior

正确计算 Tooltip 初始位置。

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

purpose233 avatar Jul 30 '25 06:07 purpose233

解决成功后飞书联系chenzhijian.111

chenzhijian111 avatar Aug 01 '25 07:08 chenzhijian111