Highcharts-带有div居中的饼图

Question

我想要什么在React Native的Highcharts.js中创建：我有2个选择：

1. 使用chart.renderer.circle在甜甜圈图的中心绘制一个圆圈，然后添加图像，文本，阴影或zIndex。但是我不知道如何将Image / Text / Shadow添加到渲染的Circle。这是此方法的jsFiddle demo。
2. 将div放在highcharts 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