我正在为一个项目使用 Highcharts 和 React，并且需要为生成的 SVG 支持服务器端渲染。有人可以建议一种这样做的方法，以便我获得带有 png/jpg 图像的静态渲染页面吗？用于查看渲染内容的浏览器不支持 svg。
谢谢。
有没有办法使用 React 执行 SVG 图形的服务器端渲染？
IT技术
reactjs
svg
highcharts
server-side-rendering
react-dom-server
2021-05-16 08:09:32
2个回答
您可以使用节点modulereact- highcharts 在 react 中渲染 highcharts您可以使用以下官方文档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>
)
}
找到了解决办法。Highcharts 有一个现成的解决方案，可以做我一直在寻找的事情。它是一个节点/快速服务器，用于使用 PhantomJS 从 highcharts 配置 json 获取 png 响应。https://www.highcharts.com/docs/export-module/setting-up-the-server