如何在 Highcharts 的饼图右侧添加文本？答案

【问题标题】：how to add text to the right side of the Piechart in Highcharts?如何在 Highcharts 的饼图右侧添加文本？
【发布时间】：2020-04-08 14:37:30
【问题描述】：

我有一个饼图，底部有图例。我想在饼图右侧添加文字。如何添加？先感谢您。

【问题讨论】：

你应该看看这个 - stackoverflow.com/questions/5546346/…

标签： angular highcharts

【解决方案1】：

您可以使用 SVGRenderer 功能在任何您想要的地方呈现自定义文本。如果您想要响应式文本，我鼓励在 chart.events.render 回调中创建它，该回调会在每次调整大小后触发。

events: {
  render() {
    let chart = this,
      x,
      y;


    //check if label exist after window resize
    if (chart.label) {
      chart.label.destroy();
    };

    y = 80;
    x = chart.clipBox.width - 100;
    chart.label = chart.renderer.text('This text is <span style="color: red">styled</span> and <a href="http://example.com">linked</a>', x, y)
      .css({
        color: '#4572A7',
        fontSize: '16px'
      })
      .add();
  }
}

演示：https://jsfiddle.net/BlackLabel/4fzyLn0r/2/

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

API：https://api.highcharts.com/highcharts/chart.events.render

【讨论】：

感谢您的回答@Sebastian Wedzel。我现在可以添加文本，但问题是我调整屏幕大小时文本没有响应。
你能在我可以处理的在线编辑器上重现你的案例吗？
我花了一些时间之后才开始工作。感谢您的回答和回复。
我必须从 ts 文件中添加一些动态文本，它有三到四行。可以容纳renderer.text中的空间吗？ @塞巴斯蒂安·温泽尔
将 useHTML 设置为 true 并在文本中设置 html
属性。 jsfiddle.net/BlackLabel/Lqdrv4u0 API：api.highcharts.com/class-reference/Highcharts.SVGRenderer#text