Есть ли способ выполнить рендеринг SVG-графики на сервере с помощью React?

Question

Я использую Highcharts и React для проекта и мне нужно поддерживать рендеринг на стороне сервера для сгенерированного SVG. Может кто-нибудь предложить способ сделать это так, чтобы я получал статическую визуализированную страницу с изображениями в формате png/jpg? Браузер, который будет использоваться для просмотра визуализированного контента, не поддерживает svg.

Благодарю.

Answer 1

Нашел решение. У Highcharts есть готовое решение для выполнения именно того, что я искал. Это узел / экспресс-сервер для получения png-ответа от конфигурации высоких диаграмм json с использованием PhantomJS. https://www.highcharts.com/docs/export-module/setting-up-the-server

Answer 2

Вы можете визуализировать старшие чарты в реакции, используя модуль узла " реактивные верхние чарты". Вы можете использовать следующее для официальной документации https://www.npmjs.com/package/react-highcharts

Вам необходимо передать параметры конфигурации в компонент ReactHighcharts

ниже приведен пример круговой диаграммы

_piechartDataLoad() {
        return (
            {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie',
                    style: {
                        fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif",
                        fontSize: "0.875rem",
                        fontWeight: "normal",
                        lineHeight: 1.5,
                        color: "#263238",
                    }
                },
                title: {
                    text: 'Product with more complaints'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            connectorColor: 'silver'
                        }
                    }
                },
                series: [{
                           name: 'Brands',
                           colorByPoint: true,
                           data: [{
                             name: 'Chrome',
                             y: 61.41,
                             sliced: true,
                             selected: true
                          }, {
                             name: 'Internet Explorer',
                             y: 11.84
                          }, {
                             name: 'Firefox',
                             y: 10.85
                          }, {
                             name: 'Edge',
                             y: 4.67
                          }, {
                             name: 'Safari',
                             y: 4.18
                          }, {
                             name: 'Sogou Explorer',
                             y: 1.64
                          }, {
                             name: 'Opera',
                             y: 1.6
                          }, {
                             name: 'QQ',
                             y: 1.2
                          }, {
                             name: 'Other',
                             y: 2.61
                          }]
                      }]
            }
        )
    }

render(){
  return(
    <ReactHighcharts config={this._piechartDataLoad} ></ReactHighcharts>
  )
}