highcharts 想在环形图的中心添加一个装饰环 不可触碰出弹出框 不可在图例中显示 不可触碰后在环中心展示文字

您可以通过在 Highcharts 的环形图（pie chart）中添加两个系列（series）来实现这个需求：

1. 第一个系列用于展示环形图的数据，设置 `showInLegend` 选项为 `false`，禁用触碰信息框（tooltip），例如：

{
    name: 'Data',
    type: 'pie',
    data: [
        ['A', 10],
        ['B', 20],
        ['C', 30]
    ],
    showInLegend: false, // 不展示在图例中
    tooltip: {
        enabled: false // 禁用触碰信息框
    }
}

2. 第二个系列用于展示装饰环，设置 `innerSize` 选项为一个小于 100% 的值，使其成为一个空心圆，然后设置 `showInLegend` 选项为 `false`，禁用触碰信息框（tooltip），例如：

{
    name: 'Decoration',
    type: 'pie',
    data: [{
        y: 1,
        color: 'transparent'
    }],
    innerSize: '80%', // 设置为一个小于 100% 的值，成为一个空心圆
    showInLegend: false, // 不展示在图例中
    tooltip: {
        enabled: false // 禁用触碰信息框
    },
    dataLabels: {
        enabled: false // 禁用数据标签
    }
}

接下来，您可以通过在 Highcharts 的 `chart.events.load` 事件中添加一个函数来在环形图的中心添加文字，例如：

chart: {
    type: 'pie',
    events: {
        load: function () {
            var chart = this;
            chart.renderer.text(
                'Center Text', // 文字内容
                chart.plotWidth / 2, // x 坐标
                chart.plotHeight / 2 // y 坐标
            ).attr({
                zIndex: 1 // 确保文字在装饰环之上
            }).add();
        }
    }
},
series: [{
    name: 'Data',
    type: 'pie',
    data: [
        ['A', 10],
        ['B', 20],
        ['C', 30]
    ],
    showInLegend: false, // 不展示在图例中
    tooltip: {
        enabled: false // 禁用触碰信息框
    }
}, {
    name: 'Decoration',
    type: 'pie',
    data: [{
        y: 1,
        color: 'transparent'
    }],
    innerSize: '80%', // 设置为一个小于 100% 的值，成为一个空心圆
    showInLegend: false, // 不展示在图例中
    tooltip: {
        enabled: false // 禁用触碰信息框
    },
    dataLabels: {
        enabled: false // 禁用数据标签
    }
}]

在上面的代码中，我们在 `chart.events.load` 事件中添加了一个函数来在中心添加了一个文字，通过设置 `zIndex` 选项为 `1`，确保文字在装饰环之上。同时，我们还在装饰环的第一个数据点中设置了一个 `color` 为 `transparent`，使其不可见。