Highcharts - круговая диаграмма с html div в центре

Question

Что я хочу создать в Highcharts.js в React Native:

У меня было 2 варианта:

1. Визуализируйте круг в центре на кольцевой диаграмме, используя chart.renderer.circle, а затем добавьте Image, Text, Shadow или zIndex.
   Но я не мог понять, как добавить Image / Text / Shadow к визуализированному кругу.
   Вот демоверсия jsFiddle этого подхода.
   
2. Поместите div чуть выше контейнера div highcharts и примените там тень, Image, Text.
   Вот демоверсия jsFiddle этого подхода.
   
   Второй подход в значительной степени сработал, но есть много проблем, таких как
   • Подсказки скрываются подперекрывающийся 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