Highcharts双轴柱线图钻取时百分比动态显示异常问题

一、修复右侧Y轴百分比刻度异常 #

当前右侧Y轴复用左侧数值并加%符号，是因为未配置独立的刻度范围。需强制右侧Y轴为0-100%区间：

yAxis: [
    {
        title: { text: '数值' },
        alignTicks: false // 避免双轴刻度强制对齐
    },
    {
        title: { text: '百分比' },
        opposite: true, // 显示在右侧
        min: 0,
        max: 100, // 固定百分比范围
        tickInterval: 20, // 刻度间隔，可按需调整为10/25等
        labels: {
            format: '{value}%'
        },
        alignTicks: false
    }
]

通过min和max锁定刻度范围，tickInterval控制刻度密度，彻底脱离左侧Y轴的数值影响。

二、修复钻取后折线图消失问题 #

钻取后折线消失是因为默认钻取逻辑仅更新柱形图数据，未同步处理折线图的百分比数据。需通过事件监听动态计算每个层级的百分比并更新折线图：

1. 初始化时给折线图设置唯一ID #

series: [
    {
        type: 'column',
        name: '数值',
        yAxis: 0,
        data: [], // 初始柱形数据（从YII2后端获取）
        drilldown: true
    },
    {
        type: 'line',
        name: '占比',
        id: 'percent-line', // 标记折线图，用于后续更新
        yAxis: 1,
        data: [], // 初始百分比数据：(单条数据值/总和)*100
        marker: { enabled: true }
    }
]

2. 添加钻取/钻取返回事件监听 #

chart: {
    type: 'column',
    events: {
        // 处理钻取事件
        drilldown: function(e) {
            const chart = this;
            // 计算当前钻取层级的数值总和
            const total = e.seriesOptions.data.reduce((sum, item) => sum + item.y, 0);
            // 生成对应百分比数据
            const percentData = e.seriesOptions.data.map(item => ({
                name: item.name,
                y: (item.y / total) * 100
            }));
            // 更新折线图数据
            chart.get('percent-line').update({ data: percentData });
        },
        // 处理钻取返回上层事件
        drillup: function() {
            const chart = this;
            // 计算上层数据总和
            const total = chart.series[0].data.reduce((sum, item) => sum + item.y, 0);
            // 生成上层百分比数据
            const percentData = chart.series[0].data.map(item => ({
                name: item.name,
                y: (item.y / total) * 100
            }));
            // 恢复折线图数据
            chart.get('percent-line').update({ data: percentData });
        }
    }
}

补充说明 #

• 多层钻取（2-4级）均适用，每次钻取都会重新计算当前层级的数值总和与百分比，无需后端额外返回百分比数据
• 若YII2后端返回的钻取数据已包含百分比，可直接替换动态计算逻辑，直接使用后端返回的百分比值更新折线图

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