将文本添加到饼图的中心:在HC 11中不再使用Highcharts

y1aodyip  于 11个月前  发布在  Highcharts
关注(0)|答案(1)|浏览(116)

根据在一篇文章中找到的示例,我们使用了以下语法,直到迁移到HighCharts 11:

events: {
      render: function() {
        var series = this.series[0],
          seriesCenter = series.center,
          x = seriesCenter[0] + this.plotLeft,
          y = seriesCenter[1] + this.plotTop,
          text = 'Total: ' + series.total,
          fontMetrics = this.renderer.fontMetrics(16);

        if (!this.customTitle) {
          this.customTitle = this.renderer.text(
              text,
              null,
              null,
              true
            )
            .css({
              transform: 'translate(-50%)',
              fontSize: '16px',
              color: 'red'
            })
            .add();
        }

        this.customTitle.attr({
          x,
          y: y + fontMetrics.f / 2
        });
      }
    }

字符串
HC 11中的问题是由于this.renderer. fontsname生成错误(未捕获的TypeError:Failed to execute 'getComputedStyle' on 'Window':parameter 1 is not of type 'Element'.),如示例中所示:https://jsfiddle.net/BlackLabel/mrg2qt6c/
请问你有解决办法吗?先谢谢你了。

wlp8pajw

wlp8pajw1#

这是因为,在较新的Highcharts版本中,fontMetrics方法中的第一个参数需要是有效的SVG元素,而不是数字。您可以用途:

const fontMetrics = this.renderer.fontMetrics(this.customTitle);

this.customTitle.attr({
    x,
    y: y + fontMetrics.f / 2
});

字符串

现场演示:https://jsfiddle.net/BlackLabel/h31862sy/
**API引用:**https:api.highcharts.com/class-reference/Highcharts.SVGRenderer#fontMetrics

相关问题