Highcharts径向图数据标签与中心文本高级定制指南

series: [{
    data: [{
        x: 0,
        y: 29.9,
        // 为第一个点单独配置数据标签
        dataLabels: {
            enabled: true,          // 启用数据标签
            allowOverlap: true,     // 允许标签重叠，防止自动隐藏
            format: '财务数据',    // 自定义标签文本
            color: '#000',          // 标签颜色
            rotation: 280,          // 标签旋转角度，适应径向布局
            x: 2,                   // 相对于数据点的X轴偏移
            y: 15                   // 相对于数据点的Y轴偏移
        }
    }, {
        x: 1,
        y: 71.5,
        // 其他点可以使用默认或单独配置
    }, {
        x: 2,
        y: 106.4
    }]
}]

chart: {
    events: {
        load: function() {
            let chart = this,
                series = chart.series[0], // 获取第一个系列
                point = series.data[0];   // 获取第一个数据点

            console.log("初始点数据:", point.y);

            // 使用 point.update() 方法更新数据点的值
            point.update({
                y: 33, // 更新Y轴数值
                // 也可以在此处更新 dataLabels 属性
                dataLabels: {
                    format: '更新后的数据: {y}'
                }
            });

            console.log("更新后点数据:", point.y);
        }
    }
}

chart: {
    events: {
        load: function() {
            let chart = this;

            // 在图表中心添加自定义文本
            chart.renderer.text('总计：100%', chart.chartWidth / 2, chart.chartHeight / 2 + 10)
                .css({
                    color: '#333',
                    fontSize: '18px',
                    fontWeight: 'bold',
                    textAlign: 'center'
                })
                .attr({
                    zIndex: 99 // 确保文本显示在最上层
                })
                .add(); // 将文本添加到图表

            // 调整文本位置使其居中
            // 获取文本的BBox（边界框）以计算精确中心
            let textElement = chart.renderer.text('总计：100%', 0, 0)
                .css({
                    color: '#333',
                    fontSize: '18px',
                    fontWeight: 'bold',
                    textAlign: 'center'
                })
                .attr({
                    zIndex: 99
                })
                .add();
            let bbox = textElement.getBBox();
            textElement.attr({
                x: chart.chartWidth / 2 - bbox.width / 2,
                y: chart.chartHeight / 2 + bbox.height / 4 // 微调Y轴位置
            });
        }
    }
}