G2
G2 copied to clipboard
antvis
[Bug]: 双轴图，左右轴均设为公共轴时，轴的数量和刻度展示不正确
Describe the bug / 问题描述
按道理应该只会有左右两个轴（如下图所示），但是现状却是有 3 个轴，拖动底部缩略轴，y 轴刻度会跟着发生变化
Reproduction link / 复现链接
https://stackblitz.com/edit/react-be3aue24?file=package.json,index.js,index.html
Steps to Reproduce the Bug or Issue / 重现步骤
No response
Version / 版本
Please select / 请选择
OS / 操作系统
- [x] macOS
- [ ] Windows
- [ ] Linux
- [ ] Others / 其他
Browser / 浏览器
- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他
@tomatodev 您好！以下是关于您问题的自动回复：
您好，感谢您的反馈和详细描述！针对您提出的“双轴图，左右轴均设为公共轴时，轴的数量和刻度展示不正确”问题，我们为您梳理了可能原因及解决建议：
一、问题分析
1. 轴数量异常
通常双轴图（Dual Axes Chart）只应显示左右各 1 个 Y 轴。如果出现 3 个轴，可能是：
- 图表配置存在多个 mark/series 且未正确共享轴（未同步或未合并轴）。
- 某些 mark/series 配置了独立的 scale，导致额外生成轴线。
- 轴配置在全局和 mark 层级重复，导致额外渲染。
2. 拖动缩略轴后刻度变化异常
- 可能因为轴的 scale 设置未同步，或启用了独立缩放，导致刻度和范围不同步。
- 当数据窗口变动时，若未正确同步 scale，Y 轴刻度会随选中数据区间动态变化。
二、解决建议
1. 确认轴同步与独立配置
-
如需左右两个公共轴（即 y 轴各一），应确保相关 mark/series 共享同一个 scale，除非确有需求才设置
scale.independent: true。 - 避免 mark 级别重复配置 axis。若 axis 需合并，应只在全局或主 mark 配置。
示例（伪代码，需结合实际数据结构调整）：
chart.options({
type: 'view',
children: [
{
type: 'interval',
encode: { x: 'time', y: 'value1' }, // 左轴
axis: { y: { position: 'left', title: '左轴' } },
},
{
type: 'line',
encode: { x: 'time', y: 'value2' }, // 右轴
scale: { y: { independent: true } }, // 仅当右轴需独立刻度时加此项
axis: { y: { position: 'right', title: '右轴' } },
}
]
});
注意：如需公共轴，不应设置 independent: true。
2. 检查缩略轴（Scrollbar）与 Axis 配置
- 拖动缩略轴时，确保数据过滤后，左右轴的 scale 范围仍然同步。
- 可通过设置 scale 的
nice: true或手动设置min/max保证刻度一致。
3. 避免多余轴的出现
- 检查是否有未使用的数据字段或冗余的 mark。
- 检查 axis 配置，保证左右轴分别只出现一次，且未出现多余的 axis 组件。
三、参考官方文档
四、建议操作步骤
- 核查所有 mark/series 的 axis、scale 配置，确认是否因 scale 独立或 axis 重复导致多余轴。
-
拖动缩略轴时观察 axis 刻度同步情况，如异常，尝试去除
independent: true或统一 scale 设置。 - 如仍有问题，可简化代码&数据，只保留核心配置，逐步排查是哪一处配置导致异常。
- 如需进一步协助，欢迎补充最小可复现 demo 或代码片段，我们会更精准定位问题。
示例修正（仅参考，需结合实际业务数据）：
// 假设你有两个数据源分别对应左右轴
chart.options({
type: 'view',
children: [
{
type: 'interval',
encode: { x: 'time', y: 'value1' },
axis: { y: { position: 'left', title: '左轴' } }, // 只配置一次左轴
},
{
type: 'line',
encode: { x: 'time', y: 'value2' },
axis: { y: { position: 'right', title: '右轴' } }, // 只配置一次右轴
// 若需右轴独立刻度，加 scale: { y: { independent: true } }
}
]
});
如有更多信息，欢迎随时补充！希望这些建议对您定位和解决问题有所帮助。
此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
排查了一下应该不是 G2 的问题，可以在 ADC 提个 issue
import { Chart } from '@antv/g2';
const chart = new Chart({ container: 'container' });
const options = {
encode: { x: 'xValue' },
children: [
{
type: 'interval',
data: [
{
xValue: '2024-11',
yField: 'y#sys_production_hours@##index',
yValue: 2151.77,
},
{
xValue: '2024-12',
yField: 'y#sys_production_hours@##index',
yValue: 76973.81,
},
{
xValue: '2025-01',
yField: 'y#sys_production_hours@##index',
yValue: 214046.69,
},
{
xValue: '2025-02',
yField: 'y#sys_production_hours@##index',
yValue: 4602.27,
},
{
xValue: '2025-03',
yField: 'y#sys_production_hours@##index',
yValue: 3929.33,
},
{
xValue: '2025-04',
yField: 'y#sys_production_hours@##index',
yValue: -1495.62,
},
{
xValue: '2025-05',
yField: 'y#sys_production_hours@##index',
yValue: 1322.5,
},
{
xValue: '2025-06',
yField: 'y#sys_production_hours@##index',
yValue: 4675.45,
},
{
xValue: '2025-07',
yField: 'y#sys_production_hours@##index',
yValue: 19096.28,
},
{
xValue: '2025-08',
yField: 'y#sys_production_hours@##index',
yValue: 455,
},
],
encode: {
y: 'yValue',
series: 'yField',
color: 'yField'
},
scale: {
y: {
key: 'line1',
independent: false,
},
},
axis: {
y: {
titleFontSize: 12,
labelFontSize: 12,
labelFillOpacity: 1,
labelStrokeOpacity: 1,
grid: true,
gridLineDash: [4, 4],
gridLineWidth: 1,
gridStroke: '#e5e5e5',
gridStrokeOpacity: 1,
line: true,
labelAutoRotate: false,
labelAutoHide: true,
labelAutoWrap: false,
},
},
},
{
data: [
{
xValue: '2024-11',
yField: 'y#sys_non_production_hours@##index',
yValue: 0,
},
{
xValue: '2024-12',
yField: 'y#sys_non_production_hours@##index',
yValue: 0,
},
{
xValue: '2025-01',
yField: 'y#sys_non_production_hours@##index',
yValue: 0,
},
{
xValue: '2025-02',
yField: 'y#sys_non_production_hours@##index',
yValue: 0,
},
{
xValue: '2025-03',
yField: 'y#sys_non_production_hours@##index',
yValue: 0,
},
{
xValue: '2025-04',
yField: 'y#sys_non_production_hours@##index',
yValue: 8,
},
{
xValue: '2025-05',
yField: 'y#sys_non_production_hours@##index',
yValue: 0,
},
{
xValue: '2025-06',
yField: 'y#sys_non_production_hours@##index',
yValue: 27.24,
},
{
xValue: '2025-07',
yField: 'y#sys_non_production_hours@##index',
yValue: 0,
},
{
xValue: '2025-08',
yField: 'y#sys_non_production_hours@##index',
yValue: 66,
},
],
scale: {
y: {
key: 'line1',
independent: false,
},
},
axis: {
y: {
titleFontSize: 12,
labelFontSize: 12,
labelFillOpacity: 1,
labelStrokeOpacity: 1,
grid: true,
gridLineDash: [4, 4],
gridLineWidth: 1,
gridStroke: '#e5e5e5',
gridStrokeOpacity: 1,
line: true,
labelAutoRotate: false,
labelAutoHide: true,
labelAutoWrap: false,
},
},
type: 'line',
encode: {
y: 'yValue',
color: 'yField',
shape: 'line'
},
// point: {
// data: [
// {
// xValue: '2024-11',
// yField: 'y#sys_non_production_hours@##index',
// yValue: 0,
// },
// {
// xValue: '2024-12',
// yField: 'y#sys_non_production_hours@##index',
// yValue: 0,
// },
// {
// xValue: '2025-01',
// yField: 'y#sys_non_production_hours@##index',
// yValue: 0,
// },
// {
// xValue: '2025-02',
// yField: 'y#sys_non_production_hours@##index',
// yValue: 0,
// },
// {
// xValue: '2025-03',
// yField: 'y#sys_non_production_hours@##index',
// yValue: 0,
// },
// {
// xValue: '2025-04',
// yField: 'y#sys_non_production_hours@##index',
// yValue: 8,
// },
// {
// xValue: '2025-05',
// yField: 'y#sys_non_production_hours@##index',
// yValue: 0,
// },
// {
// xValue: '2025-06',
// yField: 'y#sys_non_production_hours@##index',
// yValue: 27.24,
// },
// {
// xValue: '2025-07',
// yField: 'y#sys_non_production_hours@##index',
// yValue: 0,
// },
// {
// xValue: '2025-08',
// yField: 'y#sys_non_production_hours@##index',
// yValue: 66,
// },
// ],
// scale: {
// y: {
// key: 'line1',
// independent: false,
// },
// },
// },
},
{
data: [
{
xValue: '2024-11',
yField: 'y2#sys_productivity_rate@##index',
yValue: 1,
},
{
xValue: '2024-12',
yField: 'y2#sys_productivity_rate@##index',
yValue: 1,
},
{
xValue: '2025-01',
yField: 'y2#sys_productivity_rate@##index',
yValue: 1,
},
{
xValue: '2025-02',
yField: 'y2#sys_productivity_rate@##index',
yValue: 1,
},
{
xValue: '2025-03',
yField: 'y2#sys_productivity_rate@##index',
yValue: 1,
},
{
xValue: '2025-04',
yField: 'y2#sys_productivity_rate@##index',
yValue: 1.005377,
},
{
xValue: '2025-05',
yField: 'y2#sys_productivity_rate@##index',
yValue: 1,
},
{
xValue: '2025-06',
yField: 'y2#sys_productivity_rate@##index',
yValue: 0.994207,
},
{
xValue: '2025-07',
yField: 'y2#sys_productivity_rate@##index',
yValue: 1,
},
{
xValue: '2025-08',
yField: 'y2#sys_productivity_rate@##index',
yValue: 0.87332,
},
],
scale: {
y: {
key: 'line2',
independent: false,
},
},
axis: {
y: {
titleFontSize: 12,
labelFontSize: 12,
labelFillOpacity: 1,
labelStrokeOpacity: 1,
grid: true,
gridLineDash: [4, 4],
gridLineWidth: 1,
gridStroke: '#e5e5e5',
gridStrokeOpacity: 1,
line: true,
labelAutoRotate: false,
labelAutoHide: true,
labelAutoWrap: false,
position: 'right',
},
},
encode: {
y: 'yValue',
color: 'yField',
shape: 'line'
},
type: 'line',
// point: {
// data: [
// {
// xValue: '2024-11',
// yField: 'y2#sys_productivity_rate@##index',
// yValue: 1,
// },
// {
// xValue: '2024-12',
// yField: 'y2#sys_productivity_rate@##index',
// yValue: 1,
// },
// {
// xValue: '2025-01',
// yField: 'y2#sys_productivity_rate@##index',
// yValue: 1,
// },
// {
// xValue: '2025-02',
// yField: 'y2#sys_productivity_rate@##index',
// yValue: 1,
// },
// {
// xValue: '2025-03',
// yField: 'y2#sys_productivity_rate@##index',
// yValue: 1,
// },
// {
// xValue: '2025-04',
// yField: 'y2#sys_productivity_rate@##index',
// yValue: 1.005377,
// },
// {
// xValue: '2025-05',
// yField: 'y2#sys_productivity_rate@##index',
// yValue: 1,
// },
// {
// xValue: '2025-06',
// yField: 'y2#sys_productivity_rate@##index',
// yValue: 0.994207,
// },
// {
// xValue: '2025-07',
// yField: 'y2#sys_productivity_rate@##index',
// yValue: 1,
// },
// {
// xValue: '2025-08',
// yField: 'y2#sys_productivity_rate@##index',
// yValue: 0.87332,
// },
// ],
// scale: {
// y: {
// key: 'line2',
// independent: false,
// },
// },
// },
},
],
scale: {
x: {
type: 'band',
},
color: {
range: [
'#0781c3',
'#ff7500',
'#83bff4',
'#ffb86c',
'#3fb27e',
'#9bcc7e',
'#f35352',
'#ff9193',
'#9d61c2',
'#caaed8',
'#8fa500',
'#bfd000',
],
},
},
slider: {
x: {
showLabel: false,
values: [0, 0.9990043],
handleIconCursor: 'pointer',
},
},
axis: {
x: {
titleFontSize: 12,
labelFontSize: 12,
labelFillOpacity: 1,
labelStrokeOpacity: 1,
grid: false,
gridLineDash: [4, 4],
gridLineWidth: 1,
gridStroke: '#e5e5e5',
gridStrokeOpacity: 1,
line: true,
labelAutoRotate: false,
labelAutoHide: true,
labelAutoWrap: false,
},
},
legend: false,
interaction: {
tooltip: {
shared: true,
mount: 'body',
},
},
};
chart.options(options)
chart.render();
