折线图elementHighlightByColor不起作用
- Dominant language
- TypeScript
- Stars
- 12.6k
- Forks
- 1.7k
- PR merge metrics
- No merged PRs in 30d
Description
### 问题描述
官网给的折线图例子https://g2.antv.antgroup.com/examples/general/line/#curved
使用 elementHighlightByColor 不起作用
### 重现链接
_No response_
### 重现步骤
import { Chart } from '@antv/g2';
const data = [
{ month: 'Jan', city: 'Tokyo', temperature: 7 },
{ month: 'Jan', city: 'London', temperature: 3.9 },
{ month: 'Feb', city: 'Tokyo', temperature: 6.9 },
{ month: 'Feb', city: 'London', temperature: 4.2 },
{ month: 'Mar', city: 'Tokyo', temperature: 9.5 },
{ month: 'Mar', city: 'London', temperature: 5.7 },
{ month: 'Apr', city: 'Tokyo', temperature: 14.5 },
{ month: 'Apr', city: 'London', temperature: 8.5 },
{ month: 'May', city: 'Tokyo', temperature: 18.4 },
{ month: 'May', city: 'London', temperature: 11.9 },
{ month: 'Jun', city: 'Tokyo', temperature: 21.5 },
{ month: 'Jun', city: 'London', temperature: 15.2 },
{ month: 'Jul', city: 'Tokyo', temperature: 25.2 },
{ month: 'Jul', city: 'London', temperature: 17 },
{ month: 'Aug', city: 'Tokyo', temperature: 26.5 },
{ month: 'Aug', city: 'London', temperature: 16.6 },
{ month: 'Sep', city: 'Tokyo', temperature: 23.3 },
{ month: 'Sep', city: 'London', temperature: 14.2 },
{ month: 'Oct', city: 'Tokyo', temperature: 18.3 },
{ month: 'Oct', city: 'London', temperature: 10.3 },
{ month: 'Nov', city: 'Tokyo', temperature: 13.9 },
{ month: 'Nov', city: 'London', temperature: 6.6 },
{ month: 'Dec', city: 'Tokyo', temperature: 9.6 },
{ month: 'Dec', city: 'London', temperature: 4.8 },
];
const chart = new Chart({
container: 'container',
autoFit: true,
});
chart
.data(data)
.encode('x', 'month')
.encode('y', 'temperature')
.encode('color', 'city')
.scale('x', {
range: [0, 1],
})
.scale('y', {
nice: true,
})
.axis('y', { labelFormatter: (d) => d + '°C' });
chart.line().encode('shape', 'smooth')
.interaction('elementHighlightByColor', { background: true }) // 这里
chart.point().encode('shape', 'point').tooltip(false);
chart.render();
### 预期行为
_No response_
### 平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
### 屏幕截图或视频(可选)
_No response_
### 补充说明(可选)
_No response_
Contributor guide
Research direction
Reproduce the curved line example linked in the issue using the provided TypeScript snippet, focusing on the line mark's interaction('elementHighlightByColor', { background: true }) call. Trace that interaction entry point and compare the observed behavior with the two colored series; done means the interaction highlights the intended series in the example.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100