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

Highcharts.chart('container', {
    chart: {
        polar: true, // 启用极坐标模式以创建径向图
        type: 'column' // 或 'bar', 'area' 等
    },
    title: {
        text: '径向图数据标签对齐示例'
    },
    pane: {
        size: '85%', // 控制径向图大小
        innerSize: '20%' // 控制中心空白区域大小
    },
    xAxis: {
        categories: ['财务', '市场', '技术', '运营', '人力'],
        tickmarkPlacement: 'on',
        lineWidth: 0
    },
    yAxis: {
        min: 0,
        max: 120,
        labels: {
            enabled: false // 隐藏Y轴标签
        },
        gridLineInterpolation: 'polygon',
        lineWidth: 0
    },
    series: [{
        name: '部门绩效',
        data: [{
            x: 0, // 对应 xAxis categories 的索引
            y: 29.9,
            dataLabels: {
                enabled: true,
                allowOverlap: true,
                format: '财务: {y:.1f}%', // 显示具体数值
                color: '#333', // 黑色标签
                rotation: 280, // 调整旋转角度以匹配条形方向
                x: 2, // 微调水平位置
                y: 15 // 微调垂直位置
            }
        }, {
            x: 1,
            y: 71.5,
            dataLabels: {
                enabled: true,
                align: 'right', // 对于其他点，可以尝试通用对齐
                color: '#FFFFFF',
                rotation: 270,
                x: -10
            }
        }, {
            x: 2,
            y: 106.4
        }, {
            x: 3,
            y: 12.9
        }, {
            x: 4,
            y: 45.3
        }],
        pointPadding: 0.025,
        groupPadding: 0,
        // 默认的dataLabels配置，会被点级别的配置覆盖
        dataLabels: {
            enabled: true,
            align: 'right',
            color: '#FFFFFF',
            x: -10,
            rotation: 270
        }
    }]
});

// 假设在图表配置中
chart: {
    events: {
        load: function() {
            const chart = this;
            const series = chart.series[0];
            const firstPoint = series.data[0];

            // 示例：动态更新第一个点的值
            firstPoint.update({
                y: 33, // 更新Y值
                dataLabels: {
                    // 也可以在这里更新dataLabels的属性
                    format: '新值: {y:.1f}'
                }
            });
        }
    }
}

Highcharts.chart('container', {
    chart: {
        polar: true,
        type: 'column',
        events: {
            load: function() {
                const chart = this;
                // 计算图表绘图区域的中心点
                const centerX = chart.plotLeft + chart.plotWidth / 2;
                const centerY = chart.plotTop + chart.plotHeight / 2;

                // 添加中心文本
                const centerText = chart.renderer.text('总计: 123.45%', centerX, centerY)
                    .css({
                        color: '#333',
                        fontSize: '20px',
                        fontWeight: 'bold',
                        textAlign: 'center' // CSS textAlign在这里可能不直接生效，需要手动调整x
                    })
                    .attr({
                        zIndex: 5 // 确保文本显示在最上层
                    })
                    .add();

                // 为了精确水平居中，获取文本的边界框并调整x坐标
                const bbox = centerText.getBBox();
                centerText.attr({
                    x: centerX - bbox.width / 2,
                    y: centerY + bbox.height / 4 // 垂直方向微调，使基线对齐中心
                });
            }
        }
    },
    title: {
        text: '径向图中心文本示例'
    },
    pane: {
        size: '85%',
        innerSize: '20%' // 确保中心有足够的空间显示文本
    },
    xAxis: {
        categories: ['财务', '市场', '技术', '运营', '人力'],
        tickmarkPlacement: 'on',
        lineWidth: 0
    },
    yAxis: {
        min: 0,
        max: 120,
        labels: { enabled: false },
        gridLineInterpolation: 'polygon',
        lineWidth: 0
    },
    series: [{
        name: '部门绩效',
        data: [29.9, 71.5, 106.4, 12.9, 45.3],
        pointPadding: 0.025,
        groupPadding: 0,
        dataLabels: {
            enabled: true,
            align: 'right',
            color: '#FFFFFF',
            x: -10,
            rotation: 270
        }
    }]
});