Highcharts-带有div居中的饼图

Question

我想要的要在React Native的Highcharts.js中创建：

我有2个选择：

1. 使用chart.renderer.circle在甜甜圈图的中心绘制一个圆，然后添加“图像”，“文本”，“阴影”或zIndex。
   但是我不知道如何向“添加”中添加“图像/文本/阴影”。渲染的Circle。
   这里是这种方法的jsFiddle demo。
   
2. 在highcharts div容器上方放置一个div，然后在其中应用阴影，图像，文本。
   这里是这种方法的jsFiddle demo。
   
   第二种方法非常有效，但是存在许多问题，例如
   • 工具提示隐藏在重叠的div下
   • 图形的宽度大于移动屏幕的宽度。

有人做过这种图形吗？您能建议我一种绘制此图的更好方法吗？

  

对我来说，Imp最重要的是阴影效果！

Answer 1

您还可以使用Highcharts.SVGRenderer类添加图像：

// Build the chart
Highcharts.chart('container', {
    ...
}, function(chart) {
    var textX = chart.plotLeft + (chart.series[0].center[0]);
    var textY = chart.plotTop + (chart.series[0].center[1]);

    chart.renderer.image(
        'https://www.highcharts.com/samples/graphics/sun.png',
        textX - 15,
        textY - 15,
        30,
        30
    ).add();
});

---

实时演示： https://jsfiddle.net/BlackLabel/zp7suewr/

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