VChart
VChart copied to clipboard
[Bug] The result of calling showTooltip to display the mark tooltip is incorrect.
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
Expected Behavior
tooltip 内的数值正常显示
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response