antvis / antvis/G2Plot

🐛 [BUG] dual-axes.legend.custum = true, 图例操作不响应

Open
#2,947 0 comments 3 reactions 0 assignees View on GitHub
Bug
Dominant language
TypeScript
Stars
2.7k
Forks
591
PR merge metrics
No merged PRs in 30d

Description

### 🐛 Bug description [Please make everyone to understand it]

> Please provide a link by forking these links [G2Plot](https://codesandbox.io/s/g2plot-issue-template-gzfdq?file=/index.ts) or GitHub repo, a minimal reproduction.

* _Required_ **Link to minimal reproduction**:

### 📷 Step to reproduce
```js
import { DualAxes as PlotC } from '@antv/g2plot';

const columnData = [
{ time: '2019-03', value: 350, type: 's1' },
{ time: '2019-04', value: 900, type: 's1' },
{ time: '2019-05', value: 300, type: 's1' },
{ time: '2019-06', value: 450, type: 's1' },
{ time: '2019-07', value: 470, type: 's1' },
{ time: '2019-03', value: 220, type: 's2' },
{ time: '2019-04', value: 300, type: 's2' },
{ time: '2019-05', value: 250, type: 's2' },
{ time: '2019-06', value: 220, type: 's2' },
{ time: '2019-07', value: 362, type: 's2' },

{ time: '2019-03', value: 220, type: 's3' },
{ time: '2019-04', value: 300, type: 's3' },
{ time: '2019-05', value: 250, type: 's3' },
{ time: '2019-06', value: 220, type: 's3' },
{ time: '2019-07', value: 362, type: 's3' },
];

const lineData = [
{ time: '2019-03', count: 350, type: 's4' },
{ time: '2019-04', count: 900, type: 's4' },
{ time: '2019-05', count: 300, type: 's4' },
{ time: '2019-06', count: 450, type: 's4' },
{ time: '2019-07', count: 470, type: 's4' },
{ time: '2019-03', count: 220, type: 's5' },
{ time: '2019-04', count: 300, type: 's5' },
{ time: '2019-05', count: 250, type: 's5' },
{ time: '2019-06', count: 220, type: 's5' },
{ time: '2019-07', count: 362, type: 's5' },
];

const config = {
legend: {
custom: true,
position: 'right-top',
items: [
{
value: 's1',
id: 's1',
name: 's1',
marker: { symbol: 'square', style: { fill: '#5B8FF9', r: 5 } },
},
{
value: 's2',
name: 's2',
marker: { symbol: 'square', style: { fill: '#5D7092', r: 5 } },
},
{
value: 's3',
name: 's3',
marker: { symbol: 'hyphen', style: { stroke: '#5AD8A6', r: 5 } },
},
{
value: 's4',
name: 's4',
marker: { symbol: 'hyphen', style: { stroke: '#5AD8A6', r: 5 } },
},
{
value: 's5',
name: 's5',
marker: { symbol: 'hyphen', style: { stroke: '#5AD8A6', r: 5 } },
},
],
},
xField: 'time',
yField: ['value', 'count'],
xAxis: {
label: {
style: {
fill: '#000',
fontSize: 12,
},
},
line: {
style: { stroke: '#0C4796' },
},
},
yAxis: [
// y轴的最值需要指定一下,保证左右轴的比例是一致的
{ min: 0, max: 2000, tickCount: 5, label: { style: { fill: '#fff' } } },
{ visible: false, min: 0, max: 2000, tickCount: 5, label: { style: { fill: '#fff' } } },
],
tooltip: {
crosshairs: {
textBackground: { style: { fill: 'red' } },
},
},
geometryOptions: [
{
geometry: 'column',
isStack: true,
seriesField: 'type',
areaStyle: {
fill: 'red',
},
},
{
geometry: 'line',
isStack: true,
color: ['#f00', '#00f'],
seriesField: 'type',
smooth: true,
},
],
};

const chart = new PlotC('container', {
data: [columnData, lineData],
...config,
});
chart.render();
```
图例功能消失了
### 🏞 Expected result
图例功能正常使用

### 🚑 Any additional [like screenshots]
![image](https://user-images.githubusercontent.com/29876424/139029902-1246edf4-7a79-4b18-ba96-556d589aedc2.png)

* **G2Plot Version**: latest
* **Platform**: win

Contributor guide

Open the contributing guide

Research direction

Start with the provided TypeScript DualAxes reproduction and inspect how custom legends handle interaction when configured with multiple geometry options. Confirm the behavior with the supplied data and legend items; done means the custom legend responds normally to user interaction.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.