如何使饼图高图中的标题文本居中？

Question

我正在尝试使饼图 Highchart 的标题文本居中对齐。能够实现这一点，但是在鼠标悬停时，鼠标悬停时标题数据不会更新。任何人都可以帮助我。在 MouseHOver 上尝试执行下面提到的代码

 point: {
            events: {
              mouseOver: function() {
                                                  let span = '<span style="color:${this.color}" class="dealer-title">${this.y}<br/> <span style="color:#33383e;}" class="text-truncate" title="${this.name}"><b> </b></span></span>';

                $('.customTitle')[0].innerHTML = span
              }
            }
          }
        }
      },

fiddle附上： https://jsfiddle.net/5sutmqv3/1/

Answer 1

您似乎不能在标题中包含 html 标签。如果删除 SPAN，它将显示值。

$('.customTitle')[0].innerHTML = this.y

Answer 2

您需要在 text 方法调用中启用 useHTML 参数：

  chart: {
    type: 'pie',
    events: {
      load: function() {
        ...
        var text = rend.text("textTexttext", left, top, true).attr({
            'text-anchor': 'middle',
            align: 'center',
            'zIndex': 10
          }).addClass('customTitle').add();
      }
    }
  }

现场演示： https://jsfiddle.net/BlackLabel/w5a2jpk7/

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

如何使饼图高图中的标题文本居中？

How to center the title text in pie chart highchart?

highcharts

donut-chart