Highcharts - 以 html div 为中心的饼图

Question

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

我有两个选择：

1. 使用chart.renderer.circle 在圆环图的中心渲染一个圆圈，然后添加图像、文本、阴影或 zIndex。
   但我不知道如何将图像/文本/阴影添加到渲染的圆圈。
   这是这种方法的jsFiddle demo。
   
2. 在 highcharts div 容器上方放置一个 div 并在此处应用阴影、图像、文本。
   这是这种方法的jsFiddle demo。
   
   第二种方法非常有效，但是有很多问题，比如
   • 工具提示隐藏在重叠的 div 下
   • 图表宽度大于手机屏幕宽度。

有人做过这种图表吗？你能建议我一个更好的方法来绘制这个图表吗？

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

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