如何使用HighCharts JS在面积图Y轴显示正确的百分比

问题描述 #

使用面积图时需要在Y轴展示百分比，理想效果为Y轴固定显示0%、50%、100%三个标签，部分场景下会出现Y轴标签显示异常的问题。

原始配置代码 #

// Angular组件中获取Y轴配置的方法
public getYAxisOptions(graphData: SeriesAreaOptions[]): YAxisOptions {
    const [allLeads] = graphData[0].data as number[];
    return {
        title: {text: null,},
        floor: 0,
        ceiling: allLeads || 100,
        min: 0,
        max: allLeads || 100,
        labels: {
            enabled: true,
            formatter: (that: AxisLabelsFormatterContextObject<string>) => {
                if (allLeads) {
                    const percent = (Number(that.value) / allLeads * 100).toFixed(0);
                    return `${percent}%`;
                }
                return `${that.value}%`;
            }
        },
        gridLineDashStyle: "Dash",
        gridLineWidth: 1,
        lineWidth: 1,
        height: 130,
        top: 17,
        minRange: allLeads || 100
    };
}

解决方案 #

可以自定义Y轴标签的取值，该问题可通过Y轴的tickPositions配置项解决，直接在返回的配置对象中添加如下配置即可：
tickPositions: [0, allLeads/2, allLeads]
该配置会强制Y轴仅在0、数据最大值的一半、数据最大值三个位置生成刻度，配合已有的标签格式化逻辑，即可稳定输出0%、50%、100%的Y轴标签，避免出现异常标签的问题。

内容的提问来源于stack exchange，提问作者Aleksandr Kazantsev