无法在 highchart 圆环图中居中对齐字幕

Question

我想在图表的中心显示副标题。当我设置以下字幕属性时，它将通过考虑 div 高度和宽度来使字幕居中，但不会在图表中心显示字幕。我希望字幕显示在图表中心，如果图表大小动态调整，则字幕应自动调整到中心。 我尝试过使用副标题中的 y 属性，但即使图表高度/宽度发生更改，它仍然在同一位置显示副标题。

使用的属性 - 对齐：'居中'， 垂直对齐：'中间'， 浮动：真实， y:0 在少数情况下使用了这个

问题是，如果我使用 y 居中对齐并且图表大小发生更改，则字幕将再次显示在同一位置，而不是图表的中心。

附图显示字幕以 div 为中心，而不是图表 -

点击此查看图像 -

图表

有谁知道如何让字幕居中吗？

Answer 1

1. 您可以使用align、verticalAlign和y选项对齐字幕。当更改图表大小时，子标题也会正确重新缩放。 示例演示：

   https://jsfiddle.net/BlackLabel/9zjv7eqh/

2. 另一种方法可能是使用 SVG 渲染器渲染字幕。 示例演示：

   https://jsfiddle.net/BlackLabel/vg9noh6y/

   render() {
    const chart = this,
      series = chart.series[0]
    let customLabel = chart.options.chart.custom.label
   
    if (!customLabel) {
      customLabel = chart.options.chart.custom.label = chart.renderer
        .label("Total<br/>" + "<strong>2 877 820</strong>")
        .css({
          color: "#000",
          textAnchor: "middle",
        })
        .add()
    }
   
    const x = series.center[0] + chart.plotLeft,
      y = series.center[1] + chart.plotTop - customLabel.attr("height") / 2
   
    customLabel.attr({
      x,
      y,
    })
    customLabel.css({
      fontSize: `${series.center[2] / 12}px`,
    })
   },