Skip to content

[Bug] axes label display result is incorrect after sampling config is changed #4059

@purpose233

Description

@purpose233

Version

2.0.0

Link to Minimal Reproduction

null

Steps to Reproduce

const a = {
  autoRotate: false,
  autoRotateAngle: [0],
  sampling: true,
}
const b = {
  autoRotate: true,
  autoRotateAngle: [-45],
  sampling: false,
}

const spec = {
    "type": "bar",
    "data": [
        {
            "id": "Bar0",
            "values": [
                {
                    "year": "20201111111111111111",
                    "type": "线上",
                    "amount": 129
                },
                {
                    "year": "202011111111111111",
                    "type": "线下",
                    "amount": 133
                },
                {
                    "year": "2021",
                    "type": "线上",
                    "amount": 140
                },
                {
                    "year": "2021",
                    "type": "线下",
                    "amount": 142
                },
                {
                    "year": "2022",
                    "type": "线上",
                    "amount": 157
                },
                {
                    "year": "2022",
                    "type": "线下",
                    "amount": 154
                },
                {
                    "year": "2023",
                    "type": "线上",
                    "amount": 161
                },
                {
                    "year": "2023",
                    "type": "线下",
                    "amount": 189
                },
                {
                    "year": "2024",
                    "type": "线上",
                    "amount": 191
                },
                {
                    "year": "2024",
                    "type": "线下",
                    "amount": 209
                }
            ],
            "fields": {
                "year": {
                    "sortIndex": 0
                }
            }
        }
    ],
    "series": [
        {
            "type": "bar",
            "id": "series0",
            "dataId": "Bar0",
            "xField": [
                "year",
                "type"
            ],
            "yField": [
                "amount"
            ],
            "seriesField": [
                "type"
            ],
            "stack": false,
            "totalLabel": {
                "visible": false
            },
            "percent": false,
            "stackCornerRadius": [
                2,
                2,
                0,
                0
            ],
            "label": {
                "visible": false,
                "offset": 5,
                "position": "inside-top",
                "overlap": {
                    "hideOnHit": false,
                    "avoidBaseMark": false,
                    "clampForce": false,
                    "strategy": [
                        {
                            "type": "bound",
                            "position": [
                                "top"
                            ],
                            "restorePosition": false
                        },
                        {
                            "type": "moveY",
                            "offset": [
                                -4,
                                -8,
                                -20,
                                -24,
                                -28,
                                -32,
                                -36,
                                -40
                            ]
                        }
                    ]
                },
                "smartInvert": {
                    "fillStrategy": "invertBase",
                    "interactInvertType": "inside",
                    "mode": "WCAG"
                }
            },
            "customConfig": {
                "showPercent": false,
                "showSeparator": true,
                "showUnit": "",
                "showPercentStack": false,
                "showSubtotal": false,
                "showTooltipPercent": false
            }
        }
    ],
    "axes": [
        {
            "orient": "bottom",
            "type": "band",
            "label": {
                "visible": true,
                "style": {
                    "fill": "#646A73",
                    "fontSize": 12,
                    "lineHeight": 20,
                    "maxLineWidth": 75
                },
                "space": 8,
                "autoRotate": a.autoRotate,
                "autoHide": false,
                "autoRotateAngle": a.autoRotateAngle
            },
            "title": {
                "visible": false
            },
            "paddingInner": 0.5,
            "grid": {
                "style": {
                    "lineDash": [
                        3,
                        3
                    ],
                    "stroke": "rgba(31, 35, 41, 0.10)",
                    "lineWidth": 1
                }
            },
            "sampling": a.sampling
        },
        {
            "seriesId": [
                "series0"
            ],
            "orient": "left",
            "type": "linear",
            "label": {
                "visible": true
            },
            "title": {
                "visible": false
            },
            "expand": {
                "max": 0.01
            }
        }
    ],
    "crosshair": {
        "trigger": "hover",
        "xField": {
            "visible": true,
            "line": {
                "type": "rect",
                "width": "200%"
            }
        },
        "yField": {
            "visible": false
        }
    },
    "legends": [
        {
            "visible": true,
            "orient": "bottom",
            "position": "middle",
            "item": {
                "label": {}
            }
        }
    ],
    "tooltip": {
        "renderMode": "canvas",
        "style": {
            "titleLabel": {
                "maxWidth": 300,
                "multiLine": true
            },
            "keyLabel": {
                "maxWidth": 100,
                "multiLine": true
            },
            "valueLabel": {
                "maxWidth": 200,
                "multiLine": true
            }
        },
        "mark": {
            "content": {}
        },
        "dimension": {
            "content": [
                {},
                {}
            ]
        }
    },
    "region": [
        {
            "style": {
                "cursor": "pointer"
            }
        }
    ],
    "color": [
        "#4E83FD",
        "#50CEFB",
        "#935AF6",
        "#FAD355",
        "#F76964",
        "#FFA53D"
    ],
    "indicator": {}
};

const spec2 = {
    "type": "bar",
    "data": [
        {
            "id": "Bar0",
            "values": [
                {
                    "year": "20201111111111111111",
                    "type": "线上",
                    "amount": 129
                },
                {
                    "year": "202011111111111111",
                    "type": "线下",
                    "amount": 133
                },
                {
                    "year": "2021",
                    "type": "线上",
                    "amount": 140
                },
                {
                    "year": "2021",
                    "type": "线下",
                    "amount": 142
                },
                {
                    "year": "2022",
                    "type": "线上",
                    "amount": 157
                },
                {
                    "year": "2022",
                    "type": "线下",
                    "amount": 154
                },
                {
                    "year": "2023",
                    "type": "线上",
                    "amount": 161
                },
                {
                    "year": "2023",
                    "type": "线下",
                    "amount": 189
                },
                {
                    "year": "2024",
                    "type": "线上",
                    "amount": 191
                },
                {
                    "year": "2024",
                    "type": "线下",
                    "amount": 209
                }
            ],
            "fields": {
                "year": {
                    "sortIndex": 0
                }
            }
        }
    ],
    "series": [
        {
            "type": "bar",
            "id": "series0",
            "dataId": "Bar0",
            "xField": [
                "year",
                "type"
            ],
            "yField": [
                "amount"
            ],
            "seriesField": [
                "type"
            ],
            "stack": false,
            "totalLabel": {
                "visible": false
            },
            "percent": false,
            "stackCornerRadius": [
                2,
                2,
                0,
                0
            ],
            "label": {
                "visible": false,
                "offset": 5,
                "position": "inside-top",
                "overlap": {
                    "hideOnHit": false,
                    "avoidBaseMark": false,
                    "clampForce": false,
                    "strategy": [
                        {
                            "type": "bound",
                            "position": [
                                "top"
                            ],
                            "restorePosition": false
                        },
                        {
                            "type": "moveY",
                            "offset": [
                                -4,
                                -8,
                                -20,
                                -24,
                                -28,
                                -32,
                                -36,
                                -40
                            ]
                        }
                    ]
                },
                "smartInvert": {
                    "fillStrategy": "invertBase",
                    "interactInvertType": "inside",
                    "mode": "WCAG"
                }
            },
            "customConfig": {
                "showPercent": false,
                "showSeparator": true,
                "showUnit": "",
                "showPercentStack": false,
                "showSubtotal": false,
                "showTooltipPercent": false
            }
        }
    ],
    "axes": [
        {
            "orient": "bottom",
            "type": "band",
            "label": {
                "visible": true,
                "style": {
                    "fill": "#646A73",
                    "fontSize": 12,
                    "lineHeight": 20,
                    "maxLineWidth": 75
                },
                "space": 8,
                "autoRotate": b.autoRotate,
                "autoHide": false,
                "autoRotateAngle": b.autoRotateAngle
            },
            "title": {
                "visible": false
            },
            "paddingInner": 0.5,
            "grid": {
                "style": {
                    "lineDash": [
                        3,
                        3
                    ],
                    "stroke": "rgba(31, 35, 41, 0.10)",
                    "lineWidth": 1
                }
            },
            "sampling": b.sampling
        },
        {
            "seriesId": [
                "series0"
            ],
            "orient": "left",
            "type": "linear",
            "label": {
                "visible": true
            },
            "title": {
                "visible": false
            },
            "expand": {
                "max": 0.01
            }
        }
    ],
    "crosshair": {
        "trigger": "hover",
        "xField": {
            "visible": true,
            "line": {
                "type": "rect",
                "width": "200%"
            }
        },
        "yField": {
            "visible": false
        }
    },
    "legends": [
        {
            "visible": false,
            "orient": "bottom",
            "position": "middle",
            "item": {
                "label": {}
            }
        }
    ],
    "tooltip": {
        "renderMode": "canvas",
        "style": {
            "titleLabel": {
                "maxWidth": 300,
                "multiLine": true
            },
            "keyLabel": {
                "maxWidth": 100,
                "multiLine": true
            },
            "valueLabel": {
                "maxWidth": 200,
                "multiLine": true
            }
        },
        "mark": {
            "content": {}
        },
        "dimension": {
            "content": [
                {},
                {}
            ]
        }
    },
    "region": [
        {
            "style": {
                "cursor": "pointer"
            }
        }
    ],
    "color": [
        "#4E83FD",
        "#50CEFB",
        "#935AF6",
        "#FAD355",
        "#F76964",
        "#FFA53D"
    ],
    "indicator": {}
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// 处理 bar 图元上点击事件并跳转到相应的百度页面
vchart.on('click', { level: 'mark', type: 'bar' }, e => {
  vchart.updateSpec(spec2, true, { reuse: false });
}); 

// 只为了方便控制台调试用,不要拷贝
window['vchart'] = vchart;

Current Behavior

Axis label sampling config is changed from true to false / false to true, but the result of axis label is not changed.

Expected Behavior

Axis label result changes.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions