双轴图在特殊数据下右轴显示效果不对 #6223

问题描述

双轴图为啥会出现右轴值算错的情况明明值小于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