双轴图在特殊数据下右轴显示效果不对
Closed this issue · 4 comments
问题描述
双轴图为啥会出现右轴值算错的情况明明值小于10%结果显示的位置高于10%刻度线,而且这个情况不必现,大多数时候是对的,但是就会有错的情况(注意..不是所有情况下都会出现)
重现步骤
复制以下代码到官网
可以看到右轴数据和右轴坐标显示明显有问题
import { Chart } from "@antv/g2";
const chart = new Chart({ container: "container" });
chart.options({
type: "view",
autoFit: true,
children: [
{
data: {
value: [
{
aaa: "2024年04月01日",
bbb: 114,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月02日",
bbb: 133,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月03日",
bbb: 132,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月05日",
bbb: 88,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月06日",
bbb: 105,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月07日",
bbb: 131,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月08日",
bbb: 124,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月09日",
bbb: 130,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月10日",
bbb: 134,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月11日",
bbb: 120,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月12日",
bbb: 139,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月13日",
bbb: 153,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月14日",
bbb: 155,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月15日",
bbb: 156,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月16日",
bbb: 154,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月17日",
bbb: 142,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月18日",
bbb: 144,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月19日",
bbb: 130,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月20日",
bbb: 128,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月21日",
bbb: 127,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月22日",
bbb: 126,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月23日",
bbb: 133,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月24日",
bbb: 122,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月25日",
bbb: 122,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月26日",
bbb: 133,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月27日",
bbb: 111,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月28日",
bbb: 122,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月29日",
bbb: 121,
series: "bbb",
auxField: "bbb"
},
{
aaa: "2024年04月30日",
bbb: 115,
series: "bbb",
auxField: "bbb"
}
],
transform: [
{
type: "custom"
}
]
},
state: {
inactive: false,
active: false
},
type: "interval",
encode: {
x: "aaa",
y: "bbb",
color: "series"
},
scale: {
y: {
type: "linear",
nice: true,
key: "leftMetric"
}
},
interaction: {
tooltip: {
crosshairsStroke: "#D7D9DC",
shared: true,
marker: false
}
},
axis: {
x: {
line: true,
lineLineWidth: 1.5,
lineStroke: "#D7D9DC",
lineStrokeOpacity: 1,
labelFill: "#141E31",
labelOpacity: 1,
labelFontFamily: "Verdana",
title: false,
labelTransform: "rotate(0)"
},
y: {
line: false,
lineLineWidth: 1.5,
grid: true,
tick: false,
gridLineDash: [
3,
2
],
gridStroke: "#E1E3E5",
gridStrokeOpacity: 1,
style: {
labelTransform: "rotate(0)"
},
title: false,
gridStrokeWidth: 1,
labelFill: "#141E31",
labelOpacity: 1,
labelFontFamily: "Verdana"
}
},
style: {
fillOpacity: 1
}
},
{
data: {
value: [
{
aaa: "2024年04月01日",
ccc: 0,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月02日",
ccc: 0.03759398,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月03日",
ccc: 0.06060606,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月05日",
ccc: 0.02272727,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月06日",
ccc: 0.04761905,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月07日",
ccc: 0.04580153,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月08日",
ccc: 0.08870968,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月09日",
ccc: 0.06153846,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月10日",
ccc: 0.04477612,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月11日",
ccc: 0.125,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月12日",
ccc: 0.04316547,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月13日",
ccc: 0.07843137,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月14日",
ccc: 0.02580645,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月15日",
ccc: 0.07051282,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月16日",
ccc: 0.06493506,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月17日",
ccc: 0.07042254,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月18日",
ccc: 0.08333333,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月19日",
ccc: 0.03846154,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月20日",
ccc: 0.109375,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月21日",
ccc: 0.1023622,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月22日",
ccc: 0.07936508,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月23日",
ccc: 0.09022556,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月24日",
ccc: 0.07377049,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月25日",
ccc: 0.02459016,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月26日",
ccc: 0.07518797,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月27日",
ccc: 0.09009009,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月28日",
ccc: 0.05737705,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月29日",
ccc: 0.04958678,
series: "ccc",
auxField: "ccc"
},
{
aaa: "2024年04月30日",
ccc: 0.05217391,
series: "ccc",
auxField: "ccc"
}
],
transform: [
{
type: "custom"
}
]
},
state: {
inactive: false,
active: false
},
type: "line",
encode: {
x: "aaa",
y: "ccc",
color: "series",
shape: "line"
},
scale: {
y: {
type: "linear",
nice: true,
key: "rightMetric"
},
series: {
independent: true
}
},
interaction: {
tooltip: {
crosshairsStroke: "#D7D9DC",
shared: true,
marker: false
}
},
axis: {
x: {
line: true,
lineLineWidth: 1.5,
lineStroke: "#D7D9DC",
lineStrokeOpacity: 1,
labelFill: "#141E31",
labelOpacity: 1,
labelFontFamily: "Verdana",
title: false,
labelTransform: "rotate(0)"
},
y: {
line: false,
lineLineWidth: 1.5,
grid: true,
tick: false,
position: "right",
gridLineDash: [
3,
2
],
gridStroke: "#E1E3E5",
gridStrokeOpacity: 1,
style: {
labelTransform: "rotate(0)"
},
title: false,
gridStrokeWidth: 1,
labelFill: "#141E31",
labelOpacity: 1,
labelFontFamily: "Verdana"
}
},
style: {
strokeOpacity: 1,
lineWidth: 2
}
}
],
});
chart.render();
预期行为
希望正常展示右轴位置
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
屏幕截图或视频（可选）
补充说明（可选）
No response
明明这个值是0.125,但是却比右轴的0.15grid线高
图跟轴是对应的吧！
scale.linear 去掉
scale.linear 去掉
我不能理解的是,为啥在某些数据下这个配置项有问题,确实去掉可以解决,但是我就是特意加的nice效果希望轴显示更好看,但是这个计算错误很奇怪不是么?
scale: {
y: {
type: "linear",
nice: true,
key: "rightMetric"
},
series: {
independent: true
}
},