VChart
VChart copied to clipboard
[Bug] initial position for tooltip is incorrect in react-vchart
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
解决成功后飞书联系chenzhijian.111