antvis / antvis/G2

复合图下多个Y轴的实现问题

Open
#6,085 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
12.6k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

### 问题描述

用下面配置,第一次渲染右值轴感觉有问题,点下图例后正常。另外复合图多Y轴有其他思路嘛
```
{
type: "facetRect",
data: {
type: "inline",
value: [
{
门店名称: "宜兴店",
商品类别: "手机",
商品名称: "华为 HUAWEI P30天空之境全网通手机",
销售额: 72896,
销售数量: 17,
key: "宜兴店-手机-华为 HUAWEI P30天空之境全网通手机",
color: "华为 HUAWEI P30天空之境全网通手机",
},
{
门店名称: "宜兴店",
商品类别: "电脑整机",
商品名称: "Apple iPad Air 3 深空灰色",
销售额: 19440,
销售数量: 5,
key: "宜兴店-电脑整机-Apple iPad Air 3 深空灰色",
color: "Apple iPad Air 3 深空灰色",
},
{
门店名称: "江阴店",
商品类别: "影音娱乐",
商品名称: "小米(MI)小米AI音箱",
销售额: 916,
销售数量: 4,
key: "江阴店-影音娱乐-小米(MI)小米AI音箱",
color: "小米(MI)小米AI音箱",
},
{
门店名称: "江阴店",
商品类别: "手机",
商品名称: "华为 HUAWEI P30天空之境全网通手机",
销售额: 38592,
销售数量: 9,
key: "江阴店-手机-华为 HUAWEI P30天空之境全网通手机",
color: "华为 HUAWEI P30天空之境全网通手机",
},
{
门店名称: "江阴店",
商品类别: "电脑整机",
商品名称: "Apple iPad Air 3 深空灰色",
销售额: 50544,
销售数量: 13,
key: "江阴店-电脑整机-Apple iPad Air 3 深空灰色",
color: "Apple iPad Air 3 深空灰色",
},
],
},
width: 800,
height: 600,
paddingLeft: 100,
paddingRight: 100,
encode: { x: "key" },
children: [
{
type: "view",
// frame: false,
// viewStyle: {
// plotStrokeWidth: 0
// },
children: [
{
type: "interval",
encode: {
y: "销售额",
color: "color",
series: () => "销售额",
},
scale: {
y: {
independent: true,
domainMax: 80000,
},
},
axis: { y: { position: "left" } },
},
{
type: "interval",
encode: {
y: "销售数量",
color: "color",
series: () => "销售数量",
},
scale: {
y: {
independent: true,
domainMax: 20,
},
},
axis: { y: { position: "right", titleFill: "red" } },
},
],
},
],
}
```

### 重现链接

_No response_

### 重现步骤

_No response_

### 预期行为

_No response_

### 平台

- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]

### 屏幕截图或视频(可选)

_No response_

### 补充说明(可选)

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the supplied facetRect configuration and compare the initial render with the state after clicking the legend. Investigate the multiple independent Y-axis behavior in the chart configuration; done means the right axis renders correctly on the first render and the supported approach for multiple Y axes is documented or verified.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.