Highcharts词云与依赖轮图标注功能异常问题求助

一、词云（Wordcloud）标注偏移问题 #

词云的标注显示在左上角，本质原因是词云系列的原始数据点未存储布局后的实际坐标，Annotation模块默认读取数据点初始的x/y值（默认都为0），因此会定位到绘图区左上角。

解决思路 #

利用词云布局完成后的afterLayout事件，获取目标词的实际渲染坐标，再更新标注位置。

修改后代码示例

const text = 
        'Chapter 1. Down the Rabbit-Hole ' +
        'Alice was beginning to get very tired of sitting by her sister on ' +
        'the bank, and of having nothing to do: ' +
        'once or twice she had peeped into the book her sister was reading, ' +
        'but it had no pictures or conversations ' +
        'in it, \'and what is the use of a book,\' thought Alice ' +
        '\'without pictures or conversation?\'' +
        'So she was considering in her own mind (as well as she could, for ' +
        'the hot day made her feel very sleepy ' +
        'and stupid), whether the pleasure of making a daisy-chain would be ' +
        'worth the trouble of getting up and picking ' +
        'the daisies, when suddenly a White Rabbit with pink eyes ran close ' +
        'by her.',
    lines = text.replace(/[():'?0-9]+/g, '').split(/[,. ]+/g),
    data = lines.reduce((arr, word) => {
        let obj = Highcharts.find(arr, obj => obj.name === word);
        if (obj) {
            obj.weight += 1;
        } else {
            obj = {
                    id: word,
                name: word,
                weight: 1
            };
            arr.push(obj);
        }
        return arr;
    }, []);

Highcharts.chart('container', {
    accessibility: {
        screenReaderSection: {
            beforeChartFormat: '<h5>{chartTitle}</h5>' +
                '<div>{chartSubtitle}</div>' +
                '<div>{chartLongdesc}</div>' +
                '<div>{viewTableButton}</div>'
        }
    },
    series: [{
        type: 'wordcloud',
        data,
        name: 'Occurrences',
        events: {
            afterLayout: function() {
                const chart = this.chart;
                const targetPoint = this.points.find(p => p.id === 'the');
                if (targetPoint && chart.annotations[0]) {
                    const label = chart.annotations[0].labels[0];
                    // 将点的绘图区坐标转换为页面坐标
                    label.update({
                        point: {
                            x: targetPoint.plotX + chart.plotLeft,
                            y: targetPoint.plotY + chart.plotTop
                        }
                    });
                }
            }
        }
    }],
    annotations: [{
        labels: [{
            point: 'the',
            text: 'POINT BY ID'
        },
        {
            point: {x:100, y:100},
            text: 'POINT BY PX'
        }]
    }],
    title: {
        text: 'Wordcloud of Alice\'s Adventures in Wonderland',
        align: 'left'
    },
    subtitle: {
        text: 'An excerpt from chapter 1: Down the Rabbit-Hole',
        align: 'left'
    },
    tooltip: {
        headerFormat: '<span style="font-size: 16px"><b>{point.key}</b>' +
            '</span><br>'
    }
});

二、依赖轮图（Dependency Wheel）不显示标注问题 #

Dependency Wheel属于非笛卡尔坐标系系列，Annotation模块目前原生不支持绑定到该系列的连接弧点，且这类点没有常规的x/y坐标可直接调用。

解决思路 #

通过afterRender事件获取目标连接弧的角度信息，手动计算弧的中心坐标，再用Highcharts Renderer直接绘制标注文本。

修改后代码示例

Highcharts.chart('container', {
    title: {
        text: 'Highcharts Dependency Wheel'
    },
    accessibility: {
        point: {
            valueDescriptionFormat: '{index}. From {point.from} to ' +
                '{point.to}: {point.weight}.'
        }
    },
    series: [{
        keys: ['from', 'to', 'weight', 'id'],
        data: [
            ['Brazil', 'Portugal', 5],
            ['Brazil', 'France', 1, 'brazil-france'],
            ['Brazil', 'Spain', 1],
            ['Brazil', 'England', 1],
            ['Canada', 'Portugal', 1],
            ['Canada', 'France', 5],
            ['Canada', 'England', 1],
            ['Mexico', 'Portugal', 1],
            ['Mexico', 'France', 1],
            ['Mexico', 'Spain', 5],
            ['Mexico', 'England', 1],
            ['USA', 'Portugal', 1],
            ['USA', 'France', 1],
            ['USA', 'Spain', 1],
            ['USA', 'England', 5],
            ['Portugal', 'Angola', 2],
            ['Portugal', 'Senegal', 1],
            ['Portugal', 'Morocco', 1],
            ['Portugal', 'South Africa', 3],
            ['France', 'Angola', 1],
            ['France', 'Senegal', 3],
            ['France', 'Mali', 3],
            ['France', 'Morocco', 3],
            ['France', 'South Africa', 1],
            ['Spain', 'Senegal', 1],
            ['Spain', 'Morocco', 3],
            ['Spain', 'South Africa', 1],
            ['England', 'Angola', 1],
            ['England', 'Senegal', 1],
            ['England', 'Morocco', 2],
            ['England', 'South Africa', 7],
            ['South Africa', 'China', 5],
            ['South Africa', 'India', 1],
            ['South Africa', 'Japan', 3],
            ['Angola', 'China', 5],
            ['Angola', 'India', 1],
            ['Angola', 'Japan', 3],
            ['Senegal', 'China', 5],
            ['Senegal', 'India', 1],
            ['Senegal', 'Japan', 3],
            ['Mali', 'China', 5],
            ['Mali', 'India', 1],
            ['Mali', 'Japan', 3],
            ['Morocco', 'China', 5],
            ['Morocco', 'India', 1],
            ['Morocco', 'Japan', 3],
            ['Japan', 'Brazil', 1]
        ],
        type: 'dependencywheel',
        name: 'Dependency wheel series',
        dataLabels: {
            color: '#333',
            style: {
                textOutline: 'none'
            },
            textPath: {
                enabled: true
            },
            distance: 10
        },
        size: '95%',
        events: {
            afterRender: function() {
                const chart = this.chart;
                const targetLink = this.links.find(link => link.id === 'brazil-france');
                if (targetLink) {
                    // 计算弧的中心坐标
                    const center = this.center;
                    const radius = center[2] / 2;
                    const angle = (targetLink.startAngle + targetLink.endAngle) / 2;
                    const x = center[0] + (radius * 0.7) * Math.cos(angle);
                    const y = center[1] + (radius * 0.7) * Math.sin(angle);
                    
                    // 手动添加标注文本
                    chart.renderer.text('POINT BY ID', x, y)
                        .attr({
                            align: 'center',
                            fontSize: '12px',
                            fontWeight: 'bold',
                            fill: 'red'
                        })
                        .add();
                }
            }
        }
    }]
});

补充说明 #

• 词云的标注也可以直接使用positioner函数动态返回目标点坐标，无需等待afterLayout事件；
• 若需标注依赖轮图的节点而非连接弧，可直接获取节点的plotX/plotY坐标，处理方式与词云类似；
• 部分Highcharts扩展系列（如Wordcloud、Dependency Wheel）对Annotation的支持不如基础系列完善，需结合事件和Renderer做自定义适配。

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