Highcharts-React获取图表的Base64 PNG [英] Highcharts-React Get Base64 PNG of chart
问题描述
我希望将图表导出传递到专门需要PNG或JPG的组件,因此不幸的是,SVG将无法正常工作.
I'm looking to pass a chart export to a component that specifically requires PNG or JPG- so an SVG will unfortunately not work.
借助其他SO答案-我能够使用以下代码获得SVG Base64:
With the help of other SO answers- I was able to get the SVG Base64 using the following code:
let link = "data:image/svg+xml;base64," + btoa(this.lineChartRef.current.CHART.current.chart.getSVG());
有没有一种方法可以获取PNG base64?还是React内有一种有效的方法可以将此SVG base64转换为PNG?
Is there a way I can get the PNG base64? Or is there an efficient way within React to convert this SVG base64 to a PNG?
谢谢!
推荐答案
感谢@ppotaczek转发了[此SO帖子] [1],我能够为React创建以下解决方案.希望它将对将来的其他人有所帮助!
Thanks to @ppotaczek for his forwarding of [this SO post][1], I was able to create the following solution for React. Hopefully it will help someone else in the future!
//Start by calling the chart options (using refs) into a variable and JSON stringify
let chartoptions = this.lineChartRef.current.BrokerChart.current.chart.userOptions
chartoptions = JSON.stringify(chartoptions)
//Create a data body with the following parameters
let data = {
options: chartoptions,
filename: 'LineChart',
async: true
}
let url = "https://export.highcharts.com/"
let returnedimageurl = ""
//setState will be called within the Axios return so "This" must
let self = this
axios({
method: 'post',
url: 'https://export.highcharts.com/',
data: data,
})
.then(function (response) {
returnedimageurl= url +response.data
self.setState({
activityChartPng: url
}, self.allowDownload())
})
.catch(function (response) {
//handle error
console.log(response);
});
//The activityChartPvg state can then be passed as props to the React-PDF component
[1]: https://stackoverflow.com/questions/54761784/highcharts-export-multiple-charts-using-jspdf
这篇关于Highcharts-React获取图表的Base64 PNG的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!